Separator

A visual divider between content sections with horizontal/vertical orientation, label support, and multiple style variants.

Basic

A visual separator line used to divide content into distinct sections. Built on Radix UI's Separator primitive with design system tokens.

Content above

Content below

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add separator

pnpm dlx @work-rjkashyap/unified-ui add separator

npx @work-rjkashyap/unified-ui add separator

bunx @work-rjkashyap/unified-ui add separator

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { Separator } from "@work-rjkashyap/unified-ui";

Examples

Horizontal (default)

The default orientation is horizontal — a full-width line with vertical margin.

Section One

Section Two

Section Three

Vertical

Use orientation="vertical" for inline dividers — for example, between toolbar items or navigation links. The parent must have a defined height (e.g. flex with items-center).

Home

Blog

About

<div className="flex items-center h-6">
<span>Home</span>
<Separator orientation="vertical" spacing={3} />
<span>Blog</span>
<Separator orientation="vertical" spacing={3} />
<span>About</span>
</div>

<div className="flex items-center h-6"><span>Home</span><Separator orientation="vertical" spacing={3} /><span>Blog</span><Separator orientation="vertical" spacing={3} /><span>About</span></div>

Variants

Four visual variants to match different contexts.

Default

Muted

Dashed

Gradient

<Separator variant="default" />
<Separator variant="muted" />
<Separator variant="dashed" />
<Separator variant="gradient" />

<Separator variant="default" /><Separator variant="muted" /><Separator variant="dashed" /><Separator variant="gradient" />

Variant	Description
`default`	Solid line using the `border` token color.
`muted`	Lighter line at reduced opacity.
`dashed`	Dashed border style for a softer division.
`gradient`	Fades from transparent at edges through the center.

Spacing

Control the margin around the separator using the spacing prop with the Tailwind spacing scale.

spacing=0

spacing=2

spacing=4 (default)

spacing=8

spacing=12

End

<Separator spacing={0} />
<Separator spacing={2} />
<Separator spacing={4} />  {/* default */}
<Separator spacing={8} />
<Separator spacing={12} />

<Separator spacing={0} /><Separator spacing={2} /><Separator spacing={4} />  {/* default */}<Separator spacing={8} /><Separator spacing={12} />

Spacing	Horizontal Margin	Vertical Margin
`0`	`my-0`	`mx-0`
`1`	`my-1`	`mx-1`
`2`	`my-2`	`mx-2`
`3`	`my-3`	`mx-3`
`4`	`my-4` (default)	`mx-4`
`5`	`my-5`	`mx-5`
`6`	`my-6`	`mx-6`
`8`	`my-8`	`mx-8`
`10`	`my-10`	`mx-10`
`12`	`my-12`	`mx-12`

With Label

Pass a label prop to render centered text on the separator — useful for "or" dividers, section breaks, and form layouts. Labels are only supported with horizontal orientation.

Continue with

Section Break

<Separator label="OR" />
<Separator label="Continue with" />
<Separator label="Section Break" variant="muted" />

<Separator label="OR" /><Separator label="Continue with" /><Separator label="Section Break" variant="muted" />

Labeled with Gradient

Real-World Examples

Settings Section Divider

AccountManage your account settings and preferences.

NotificationsChoose what notifications you want to receive.

PrivacyControl who can see your information.

<div className="flex flex-col gap-1">
<span className="text-sm font-medium">Account</span>
<span className="text-xs text-muted-foreground">Manage your account settings.</span>
</div>
<Separator />
<div className="flex flex-col gap-1">
<span className="text-sm font-medium">Notifications</span>
<span className="text-xs text-muted-foreground">Choose your notifications.</span>
</div>
<Separator />
<div className="flex flex-col gap-1">
<span className="text-sm font-medium">Privacy</span>
<span className="text-xs text-muted-foreground">Control your information.</span>
</div>

<div className="flex flex-col gap-1"><span className="text-sm font-medium">Account</span><span className="text-xs text-muted-foreground">Manage your account settings.</span></div><Separator /><div className="flex flex-col gap-1"><span className="text-sm font-medium">Notifications</span><span className="text-xs text-muted-foreground">Choose your notifications.</span></div><Separator /><div className="flex flex-col gap-1"><span className="text-sm font-medium">Privacy</span><span className="text-xs text-muted-foreground">Control your information.</span></div>

Email & Password

<Button variant="outline" className="w-full">Sign in with Google</Button>
<Separator label="OR" spacing={0} />
<form>
<Input placeholder="Email" />
<Input type="password" placeholder="Password" />
<Button className="w-full">Sign In</Button>
</form>

<Button variant="outline" className="w-full">Sign in with Google</Button><Separator label="OR" spacing={0} /><form><Input placeholder="Email" /><Input type="password" placeholder="Password" /><Button className="w-full">Sign In</Button></form>

Bold

Italic

Underline

Left

Center

Right

<div className="flex items-center h-9 px-3 border border-border rounded-md">
<span>Bold</span>
<Separator orientation="vertical" spacing={2} />
<span>Italic</span>
<Separator orientation="vertical" spacing={2} />
<span>Underline</span>
<Separator orientation="vertical" spacing={3} />
<span>Left</span>
<Separator orientation="vertical" spacing={2} />
<span>Center</span>
<Separator orientation="vertical" spacing={2} />
<span>Right</span>
</div>

<div className="flex items-center h-9 px-3 border border-border rounded-md"><span>Bold</span><Separator orientation="vertical" spacing={2} /><span>Italic</span><Separator orientation="vertical" spacing={2} /><span>Underline</span><Separator orientation="vertical" spacing={3} /><span>Left</span><Separator orientation="vertical" spacing={2} /><span>Center</span><Separator orientation="vertical" spacing={2} /><span>Right</span></div>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "muted" \| "dashed" \| "gradient"`	`"default"`	Visual style of the separator line.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the separator.
`decorative`	`boolean`	`true`	When `true`, hidden from assistive technology. When `false`, renders as a semantic separator.
`spacing`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10 \| 12`	`4`	Margin around the separator (vertical for horizontal, horizontal for vertical).
`label`	`ReactNode`	—	Optional centered label text. Only supported for horizontal orientation.
`className`	`string`	—	Additional CSS classes.

All standard HTML attributes are forwarded to the underlying Radix UI Separator.Root element.

Accessibility

Most separators are purely decorative. Only set decorative={false} when the separator conveys meaningful structure (e.g., separating form sections that a screen reader should announce).

decorative={true} (default) — Renders with role="none", completely hidden from assistive technology. Use this for visual-only dividers.
decorative={false} — Renders with role="separator" and aria-orientation, making it visible to screen readers as a structural boundary.
Label text — When a label is provided, the text is visible but does not affect semantics when decorative is true. For non-decorative labeled separators, the wrapper receives the separator role.

Separator vs. Divider

The design system includes both a Separator component (in the components layer) and a Divider primitive (in the primitives layer):

Feature	Separator	Divider
Layer	Components	Primitives
Built on	Radix UI Separator	Native `<hr>` element
Variants	`default`, `muted`, `dashed`, `gradient`	None
Labels	✅ Supported	❌ Not supported
Decorative	✅ Radix-managed `role`	Relies on `aria-orientation`
Use case	Rich dividers with labels and variants	Simple spacing lines

Use Separator when you need variant styling, labels, or Radix-level accessibility semantics. Use Divider for simple, lightweight spacing lines in layout primitives.

Design Tokens

Token	Usage
`--border`	Default separator line color
`--muted-foreground`	Muted variant and label text color

On this page