Separator

Layout

Visually or semantically separates content into groups.

npx shadcn@latest add separator

Horizontal & vertical

Preview

Live

Blog

Docs

Source

Settings

Appearance

Notifications

tsx

1<div className="flex items-center gap-3 text-sm">
2  <span>Blog</span>
3  <Separator orientation="vertical" className="h-4" />
4  <span>Docs</span>
5</div>
6
7<Separator />

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
orientation	"horizontal" \| "vertical"= "horizontal"	The axis the separator runs along.