Separator

When to UseCopy Anchor Link

• to divide two groups in a row that no surface sets apart, such as the Sidebar trigger and the Breadcrumb in a page header
• to divide two sections of a stack that have no heading between them

When Not to UseCopy Anchor Link

• to divide two Buttons of a Button Group (use ButtonGroupSeparator)
• to divide two fields of a form (use FieldSeparator in a Field, which can show text on the line)
• to divide two rows of a list (use ItemSeparator in the Item component)
• to divide two regions of a Sidebar (use SidebarSeparator)
• to divide two groups of a menu (use the menu’s own part, such as DropdownMenuSeparator in a Dropdown Menu)
• for a line that users drag to resize two panels (use the Resizable component)
• to set two groups apart with space and no line (see Spacing)

If a component has a separator part of its own, that part has the spacing or the color that fits its place.

AccessibilityCopy Anchor Link

A Separator is a div with role="separator" and aria-orientation. It can’t receive focus and has no keyboard interaction. The role exposes the break to assistive technology, so screen reader users can perceive a grouping that only the line shows, as WCAG 2.2 SC 1.3.1 Info and Relationships requires.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/separator

UsageCopy Anchor Link

A horizontal Separator is as wide as its container.

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

<Separator />;

VerticalCopy Anchor Link

For a vertical line, set orientation="vertical". A vertical Separator has no height of its own, so it stretches to the height of the flex row that contains it.

<div className="flex items-center gap-4">
    <span>Invoices</span>
    <Separator orientation="vertical" />
    <span>Estimates</span>
</div>

Set the HeightCopy Anchor Link

If you add a height class, the line is shorter, but it stays at the top of the row. To center it, add data-vertical:self-auto, which returns its alignment to the row so that items-center applies.

<Separator orientation="vertical" className="h-4 data-vertical:self-auto" />

API ReferenceCopy Anchor Link

Separator adds no props, and orientation is 'horizontal' by default. Other props are passed to Base UI’s Separator. See the Base UI Separator documentation for orientation and render.