Separator

Visual horizontal or vertical divider primitive built on Radix Separator using semantic hairline token styling.

// Radix — @radix-ui/react-separator
import { Separator } from "@shavin/ui";

Horizontal (default)

Section one

Section two

<p className="text-sm text-fg">Section one</p>
<Separator className="my-3" />
<p className="text-sm text-fg">Section two</p>

Vertical

Left

Middle

Right

<div className="flex h-10 items-center gap-3">
  <span className="text-sm text-fg">Left</span>
  <Separator orientation="vertical" />
  <span className="text-sm text-fg">Middle</span>
  <Separator orientation="vertical" />
  <span className="text-sm text-fg">Right</span>
</div>

Props

Separator takes no props beyond className and the native element's attributes.