Separator

Playground

import { Separator } from "@/components/shared/separator";

<Separator />

Horizontal

The default. It spans its container, so spacing belongs to the parent or to a margin on the separator.

import { Separator } from "@/components/shared/separator";

<div>
  <p className="font-medium">Haircut & beard</p>
  <p className="text-muted-foreground">45 min · €32.00</p>
  <Separator className="my-3" />
  <p className="font-medium">Beard trim</p>
  <p className="text-muted-foreground">20 min · €15.00</p>
</div>

Vertical

Upright between inline items. It stretches to the row, so give the row a height, or give the separator one (h-5) in a row that centres its items.

import { Separator } from "@/components/shared/separator";

<div className="flex h-5 items-center gap-3 text-sm">
  <span>Tuesday 13 October</span>
  <Separator orientation="vertical" />
  <span>6 bookings</span>
  <Separator orientation="vertical" />
  <span>2 free slots</span>
</div>

Decorative

A separator is announced to screen readers, which is right when it divides sections of content. When it only draws a line between things that are already distinct, like the dashboard's mobile header, make it decorative.

import { Separator } from "@/components/shared/separator";

<header className="flex h-14 items-center gap-2 border-b px-4">
  <SidebarTrigger />
  <Separator orientation="vertical" decorative className="h-5" />
  <span className="text-sm font-medium">Salón Luna</span>
</header>

API reference

Everything else passes through to the Base UI separator (render, style, …).

Guidelines

• Reach for space first. A separator earns its place only where space alone doesn't make the grouping clear, as in a dense list or an inline row of facts.
• One weight: an ink hairline at 8%. No thicker rules, no colours, no dashes. Emphasis belongs to type, not to lines.
• Don't stack a separator against a card edge or a table row border. Two lines side by side read as one heavy line.