Separator

Description

Separator is a single-element component rendered as a <div role="separator">. It has two render modes: a plain horizontal rule when used without children, and a labeled rule (a flex row with a centered label flanked by lines) when children is provided.

Reach for it to introduce a visible break between related-but-distinct chunks of content: groups of settings inside a card, sections of a long form, header / body / footer regions of a surface, or the canonical "OR" divider between social and email sign-in. The visual weight stays low so it segments content without competing with it.

Don't use Separator as a vertical divider; it is horizontal-only. For vertical separation between buttons, lean on Button Group's built-in dividers instead. If you only need padding-driven visual separation, let Card do the work and skip the rule. If the sections need to switch (not coexist), use Tabs; if they should open and close, use Collapsible.

Installation

pnpm dlx @create-ui/cli add separator

Usage

import { Separator } from "@/components/ui/separator"

<Separator />

Examples

Default

The bare Separator is a thin horizontal rule sized to its container. Use it whenever two adjacent blocks of content are related but should read as distinct sections.

With Label

Pass children to switch into labeled-rule mode. The component renders the label between two lines and is the right pick for the canonical "OR" pattern between two stacked actions.

Alignment

align controls where the label sits inside the rule. "center" (default) draws lines on both sides; "start" drops the leading line so the label hugs the left edge; "end" drops the trailing line so it hugs the right edge.

With Icon

The label slot accepts arbitrary children, so an icon works just as well as text. The component sizes any nested <svg> to 1.5rem and colors it with the label token, so a leading-line + glyph reads like a section marker.

Accessibility

Separator renders as a <div> with the implicit role="separator", which is announced by assistive tech as a structural break. It is not focusable and exposes no keyboard interactions; its job is purely structural.

ARIA notes:

• The root sets role="separator" so screen readers expose the structural break.
• The two side lines are aria-hidden="true" so they are skipped; only the label (when present) is announced.
• If the separator is purely decorative and sits inside a container that already conveys the break, override the role with role="presentation" via spread props.
• Don't rely on the separator alone to communicate meaning; pair it with descriptive headings or labels in the surrounding content.

Styling

Tailwind override: pass className to merge Tailwind classes with the component's base classes (via cn()):

<Separator className="border-strong" />

Data slots and attributes: the component sets these for CSS targeting:

• data-slot="separator" on the root <div>.
• data-slot="separator-content" on the inner label wrapper (only present when children is provided).
• The component sets no data-* state or variant attributes; there is no CVA axis to expose.

Target the rule color in CSS:

[data-slot="separator"] {
  border-top-color: var(--color-strong);
}

Related Components

• Button Group: when you need vertical dividers between adjacent buttons rather than a horizontal rule.
• Card: when padding-driven surface chrome already implies the section break.
• Tabs: when sections are mutually exclusive and need switching, not just visual partitioning.
• Collapsible: when the section break should toggle the following content open or closed.

API Reference

Separator

Horizontal rule with an optional inline label. Extends React.ComponentProps<"div">, so any standard div attribute (id, role, aria-*, onClick, etc.) is accepted. Sets role="separator" automatically.

Props