Separator

Visually or semantically separates content.

Installation

bash

npx shadcn@latest add @redpanda/separator

bash

pnpm dlx shadcn@latest add @redpanda/separator

bash

yarn dlx shadcn@latest add @redpanda/separator

bash

bunx shadcn@latest add @redpanda/separator

bash

nubx shadcn@latest add @redpanda/separator

bash

aube dlx shadcn@latest add @redpanda/separator

When to use

Separators provide visual or semantic content separation. Use this decision tree:

Usage

tsx

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

tsx

<Separator />

Variants

The Separator supports three visual weight variants via the variant prop, mapping to theme border tokens:

Variant	Token	Description
`default`	`bg-border`	Standard divider weight (default)
`subtle`	`bg-border-subtle`	Lighter weight for de-emphasized separation
`strong`	`bg-border-strong`	Heavier weight for emphasized separation

tsx

<Separator variant="subtle" /><Separator variant="default" /><Separator variant="strong" />

Use orientation="vertical" to separate inline content. A vertical separator stretches to match the height of its flex row automatically — you don’t need to give the container a fixed height. Outside a flex/grid layout, set an explicit height via className (e.g. className="h-6").

tsx

<div className="flex items-stretch gap-4">  <div>Overview</div>  <Separator orientation="vertical" />  <div>Activity</div></div>

Parent-hover pattern

Use Tailwind’s group utility to change separator weight on hover:

tsx

<div className="group/row">  <Separator className="group-hover/row:bg-border-strong" /></div>

Anatomy

The Separator component provides visual content division:

plaintext

Separator├── Base UI Separator primitive├── Orientation: horizontal (default) | vertical├── Variant: default | subtle | strong├── ARIA role: separator├── Visual styling: border token-based line└── Semantic meaning for screen readers

Props

Prop	Type	Default	Description
`variant`	`"default" \| "subtle" \| "strong"`	`"default"`	Visual weight of the separator
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the separator
`decorative`	`boolean`	`true`	Whether the separator is purely visual
`className`	`string`	—	Additional CSS classes

Docs API Reference

Accessibility

By default (decorative={true}) the separator renders as role="none" with aria-hidden, so screen readers skip it — appropriate for purely visual dividers.
Pass decorative={false} to render a semantic role="separator" with aria-orientation="horizontal" | "vertical" when the divider conveys meaning.
Separators have no keyboard interactions.

Credits

We use Base UI for the separator component.
We take our inspiration from Shadcn UI for the separator style.

Separator

Recent changes