Components

Separator

A hairline rule — a token-styled wrapper over Base UI's Separator. Stretches to fill its axis: full-width and 1px tall when horizontal, full-height and 1px wide when vertical.

Install

npx shadcn@latest add @alix/separator

Preview

Overview

Team

Billing

Usage

<Separator />
<Separator orientation="vertical" className="mx-3" />

Examples

Inset section rule

Use margin classes on the rule when two pieces of related content need a deliberate pause.

Engagement brief

Scope, leadership, and the next steering date.

Plan approvedBoard pack dueReview Friday

<div className="space-y-1">
  <p className="font-medium text-foreground">Engagement brief</p>
  <p className="text-muted-foreground">
    Scope, leadership, and the next steering date.
  </p>
</div>
<Separator className="my-4" />
<div className="grid gap-3 sm:grid-cols-3">
  <span>Plan approved</span>
  <span>Board pack due</span>
  <span>Review Friday</span>
</div>

Vertical action groups

A vertical separator divides toolbar groups without turning either side into a new surface.

<Button size="sm">Publish update</Button>
<Button size="sm" variant="outline">Export</Button>
<Separator orientation="vertical" className="h-6" />
<Button size="sm" variant="ghost">Archive</Button>

Panel section split

Panel, Badge, and Separator keep a dense status summary readable without adding nested cards.

Brief status

Transactions engagement

In review

Current phase

Diligence findings are with the sponsor group.

Next meeting

Steering call at 09:00 on Thursday.

Sponsor group wants final risk notes before circulation.

<Panel
  title="Brief status"
  description="Transactions engagement"
  actions={<Badge variant="primary">In review</Badge>}
>
  <div className="grid gap-4 sm:grid-cols-[1fr_auto_1fr]">
    <div className="space-y-1">
      <p className="text-sm font-medium text-foreground">Current phase</p>
      <p className="text-xs text-muted-foreground">
        Diligence findings are with the sponsor group.
      </p>
    </div>
    <Separator orientation="vertical" className="hidden h-full sm:block" />
    <div className="space-y-1">
      <p className="text-sm font-medium text-foreground">Next meeting</p>
      <p className="text-xs text-muted-foreground">
        Steering call at 09:00 on Thursday.
      </p>
    </div>
  </div>
  <Separator className="my-4" />
  <p className="text-xs text-muted-foreground">
    Sponsor group wants final risk notes before circulation.
  </p>
</Panel>

When to use it

Use it for

Section breaks inside one panel, toolbar, or metadata cluster where the content still belongs together.
Vertical dividers between action groups or compact navigation items.
Hairline separation when spacing alone does not make the hierarchy clear.

Reach for something else

Framing a card, chart, or table surface — use Panel instead.
Adding space between stacked or inline items — use Stack or Inline gap instead.
Showing location within a navigation hierarchy — use Breadcrumbs instead.
Communicating completion or health — use Progress or Badge instead.

Props

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Which axis the rule fills. Vertical needs a height from its container.
className	string	—	Merged onto the rule — e.g. margins, or a height for the vertical variant.