Separator

Separator draws a 1px line between two groups of content, such as the rows of a card or the links in a toolbar. It wraps Radix Separator and paints the line with bg-border-strong, so it follows the look's strong border. It is decorative by default, which means assistive tech skips it. Field's FieldSeparator is a Separator with the same classes, so the two draw the same line.

Above

Below

Docs

Guides

API

Usage

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

<p>Above</p>
<Separator className="my-3" />
<p>Below</p>

Horizontal or vertical

orientation is "horizontal" by default and draws a line 1px tall across the full width of its container. "vertical" draws a line 1px wide that is as tall as its container, so put it in a flex row with a set height (flex h-6 items-center). In a parent with no height a vertical separator has nothing to fill and does not show. It does not shrink in a flex row, and spacing comes from your own margin or gap.

<div className="flex h-6 items-center gap-3">
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Guides</span>
</div>

Decorative or meaningful

Most lines are decoration, and the default decorative renders role="none", so a screen reader does not stop on them. Pass decorative={false} when the line marks a real boundary that assistive tech should report, such as the break between two groups in a toolbar or a sidebar. It then renders role="separator", and a vertical one adds aria-orientation="vertical".

<Separator decorative={false} />

Props

Separator takes the props of a <div> and Radix Separator's, with one default changed.

Prop	Type	Default	What it does
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Sets the direction of the line and its size, 1px tall and full width, or 1px wide and full height.
`decorative`	`boolean`	`true`	Renders `role="none"` when true, and `role="separator"` when false.

Accessibility

By default the separator has role="none", so assistive tech skips it. Nothing is added to the tab order, because it is not a control.
With decorative={false} it has role="separator". A horizontal separator leaves aria-orientation unset, since horizontal is the role's default, and a vertical one sets aria-orientation="vertical".
Separator does not take focus and has no keyboard behavior. For a divider a reader drags, use Resizable.
The line draws in CanvasText in forced colors, so it stays visible in Windows high contrast.
Nothing about it animates, and it adds no hit target.

When to use something else

A border on the element (border-b border-border) when the line belongs to one element, like a header's bottom edge or a table row. It draws as part of that element, and forced colors keeps a border visible where a background line can disappear.
Section spacing when the groups already have titles. The headings and the gap divide the page, and a line between them adds clutter.
FieldSeparator inside a form, to divide groups of fields in a Field layout.

Install

shadcn add @gesso/separator