Components

Separator

A 1px divider rendered with the Radix Separator primitive. Uses the bg-border token so it adapts to light + dark themes automatically. Two orientations: horizontal (spans the full parent width) and vertical (spans the full parent height — the parent must define a height).

Updated Jul 24, 2026 by Leonardo Posada

Anatomy

One line, one token: a 1px block filled with bg-border. Horizontal is h-px w-full; vertical is h-full w-px. The Radix Root gives it decorative=true by default so it's aria-hidden — set decorative={false} only if the divider carries semantic meaning that must be announced.

Section one

Section two

1
Line
The 1px block. Filled with bg-border. Horizontal fills the parent's width; vertical fills the parent's height (parent needs a defined height).
2
ARIA behavior
decorative={true} (the default) makes the separator invisible to assistive tech — purely visual. Flip to false when the divider has semantic meaning (e.g. between logical page regions announced as separators).

Orientations

Horizontal (default)

The default. Spans the full parent width; 1px tall. Use to divide stacked sections in a Card, page, or any flex-col.

Section one

Section two

<Separator />
{/* Same as: */}
<Separator orientation="horizontal" />

Vertical

Spans the full parent height; 1px wide. The parent must be a flex row (or have an explicit height like h-24) — without it, the line collapses to 0. Use to divide clusters in a horizontal row.

Docs

Source

Blog

<div className="flex h-8 items-center gap-4">
  <span className="text-sm text-foreground">Docs</span>
  <Separator orientation="vertical" />
  <span className="text-sm text-foreground">Source</span>
  <Separator orientation="vertical" />
  <span className="text-sm text-foreground">Blog</span>
</div>

Recipes

Ready-to-copy compositions covering the most common Yuno usages of this atom.

Card with header + body + footer

A stacked Card with three regions divided by two horizontal Separators. The canonical Yuno card layout when the body deserves its own zone between the header and a low-emphasis footer action.

ProviderAdyen · Live

Body content

Last updated 2h ago

<Card>
  <CardHeader>
    <CardTitle>Provider</CardTitle>
    <CardDescription>Adyen · Live</CardDescription>
  </CardHeader>
  <Separator />
  <div className="p-6">
    {/* Body content */}
  </div>
  <Separator />
  <div className="flex items-center justify-between p-6">
    <span className="text-sm text-muted-foreground">Last updated 2h ago</span>
    <Button variant="outline" size="sm">View</Button>
  </div>
</Card>

Grouped row (semantic split)

A horizontal row with a vertical Separator splitting two semantically distinct clusters — e.g. the Home Shortcuts row where left = sections and right = actions. The Separator communicates the split without needing a header per group. Set an explicit height (h-24 shrink-0) so the line stays put during overflow scroll.

Group A · 1

Group A · 2

Group B · 1

Group B · 2

<div className="flex items-center gap-6">
  {/* Group A */}
  <ShortcutTile icon={ArrowsLeftRight} label="Payments" />
  <ShortcutTile icon={ChartLineUp} label="Insights" />

  <Separator orientation="vertical" className="h-24 shrink-0" />

  {/* Group B */}
  <ShortcutTile icon={BoundingBox} label="Create a connection" />
  <ShortcutTile icon={UserPlus} label="Invite a new member" />
</div>

'or' divider

Two horizontal Separators with an uppercase 'or' between them, useful in auth screens between primary and alternative sign-in methods, or between two form paths. Set flex-1 on each side so both lines share the remaining width equally.

<div className="flex items-center gap-4">
  <Separator className="flex-1" />
  <span className="text-xs uppercase text-muted-foreground">or</span>
  <Separator className="flex-1" />
</div>

Import

Copy this import line at the top of the file where you compose this atom.

A tiny atom, single named export. No provider or context required. Pass an orientation prop to switch to vertical; everything else lives in className overrides.

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

Props

Everything else from the underlying HTML or Radix primitive is forwarded via ...props.

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	Horizontal renders as a 1px-tall line spanning the full parent width. Vertical renders as a 1px-wide line spanning the full parent height — for vertical, the parent must have a defined height (a flex row or an explicit h-* class) or the line will collapse to 0.
decorative	boolean	true	When true (default), the separator is aria-hidden and does not appear in the accessibility tree — it is purely visual. Set false only when the divider carries semantic meaning that assistive tech should announce.
className	string	—	Extra classes merged onto the separator. Common overrides: flex-1 for the 'or' divider recipe, shrink-0 for vertical separators inside overflow-x rows, or a semantic tint via bg-* if the default bg-border doesn't fit.

Cross-links to atoms and patterns you may reach for next.

Shortcut tileUses a vertical Separator to split navigate vs create groups in the Home Shortcuts row.
CardThe most common host for a horizontal Separator between header / body / footer regions.
ColorsThe default fill is the bg-border token. Override via className if a specific tint is needed.