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

Component Source

<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

Component Source

<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

Prop	Type	Default
color	SeparatorColorToken \| (string & {})	"hairline"
size	SeparatorSizeToken	"1"
orientation	"horizontal" \| "vertical"	"horizontal"