Separator

Thin 1px bg-border divider for separating related content within one surface — list rows, stacked sections, or inline links. Reach for a Separator only when whitespace alone reads as ambiguous; if groups are already clearly spaced, prefer spacing over a line, and use a Card when content needs its own bounded container rather than just a rule.Horizontal (default, h-px w-full) splits stacked blocks; pass orientation="vertical" (w-px, self-stretching) for inline dividers between items in a row, such as breadcrumb-style link sets or toolbar groups. Decorative by default, so screen readers skip it.

Horizontal

Section one
Section two
<div className="w-64 space-y-3">
  <div>Section one</div>
  <Separator />
  <div>Section two</div>
</div>

Vertical

Blog
Docs
Source
<div className="flex h-6 items-center gap-3">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Source</span>
</div>

Source

packages/react/src/components/separator.tsx