Separator

PreviewCopy Anchor Link

Use a separator when spacing alone does not clearly distinguish adjacent content. The line uses the semantic border color and has no shadow.

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/separator.json

Installs Separator and its Radix dependency. Uses your existing cn utility and theme. Separator is already included when installing Field; you do not need to install it again. The endpoint is a local snapshot; see the registry guide for updates.

UsageCopy Anchor Link

import { Separator } from '@/components/ui/separator';

<Separator />

Migoy retains the Radix API used by Field. orientation defaults to horizontal, and decorative defaults to true.

CompositionCopy Anchor Link

Separator is a single part placed between content siblings. It does not wrap the content it divides:

Content container
├── First content block
├── Separator
└── Second content block

The parent owns spacing through gap or margins. Use a vertical separator in a flex row, or give it an explicit height when another layout requires one. For a labeled divider within a form, use FieldSeparator from Field.

VerticalCopy Anchor Link

Vertical separators stretch to the flex row's height, including rows whose height comes from their content. Use className="h-6" when you need a specific height. Horizontal separators fill the available width. Both orientations have a 1px thickness and do not shrink.

Semantic separationCopy Anchor Link

Decorative separators render with a presentation role. Use decorative={false} when a divider should be exposed to assistive technology as a thematic break with the separator role. A semantic vertical separator also exposes its vertical orientation. Do not add a tab stop to static dividers.

APICopy Anchor Link

Standard DOM props and refs reach the rendered element. Use headings, fieldsets, and labels to describe content structure; a visual divider does not supply those relationships.

Based on shadcn Separator and Radix Separator.