Separator

Description

Separator is a single-element component rendered as a <div role="separator">. It has two render modes: a plain rule when used without children, and a labeled rule (a flex row — or column — with a centered label flanked by lines) when children is provided. Two style axes are exposed as props: variant (line style) and direction (orientation).

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.

Separator is tiered. The free tier ships the solid line style and the horizontal direction. A developer seat unlocks the dashed variant and the vertical direction — the API is otherwise identical, so upgrading is a variant swap, not a rewrite.

For padding-driven separation, let Card do the work and skip the rule. If the sections need to switch rather than 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

Separator is tiered: the free component ships variant="solid" and direction="horizontal", and add separator with a developer seat swaps in the Pro build that adds variant="dashed" and direction="vertical". The API is otherwise identical, so upgrading is a variant swap, not a rewrite.

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.

Line style

variant sets the line style. solid (default) is the free tier; a developer seat adds dashed, a softer, more provisional break.

Orientation

direction sets the orientation. horizontal (default) is the free tier; a developer seat adds vertical for dividing inline content — nav items, inline stats, or two side-by-side panels. A vertical separator fills the height of its container, so give it (or its parent) a height. Pass children for a vertical rule with a centered label.

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 start edge; "end" drops the trailing line so it hugs the end edge.

Custom Content

The label slot accepts arbitrary children, so it holds far more than text. Drop in an icon, a badge, a button, a button group, or an avatar group to turn the rule into a section header or an inline control. The component sizes any nested <svg> to 1.5rem and colors it with the label token.

PreviewCode

Copy

NEW

Button

+7

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 root sets aria-orientation to match direction — "horizontal" (free) or "vertical" (Pro).
• 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).
• data-variant ("solid" or, on Pro, "dashed") and data-direction ("horizontal" or, on Pro, "vertical") on the root <div>, mirroring the CVA axes.

Target the rule color in CSS:

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

Related Components

• Button Group: for built-in dividers between adjacent buttons.
• 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

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

Variants