Separator
Divides content, across or down.
Constella
Components with the details done
Accessible components built on Base UI and StyleX, ready to copy into your app.
<div> <div>Constella</div> <div>Components with the details done</div></div><Separator /><div> Accessible components built on Base UI and StyleX, ready to copy into your app.</div>Installation
$ npx shadcn@latest add @constella/separatorUsage
import { Separator } from "@/components/primitives/separator";<Separator />Vertical
Use orientation="vertical" for a vertical separator. It stretches to the height of its row.
Blog
Docs
Source
<div>Blog</div><Separator orientation="vertical" /><div>Docs</div><Separator orientation="vertical" /><div>Source</div>Menu
Vertical separators between menu items with descriptions.
SettingsManage preferences
AccountProfile & security
HelpSupport & docs
<div> <span>Settings</span> <span>Manage preferences</span></div><Separator orientation="vertical" /><div> <span>Account</span> <span>Profile & security</span></div>List
Horizontal separators between list items.
- Item 1
- Value 1
- Item 2
- Value 2
- Item 3
- Value 3
<dl> <dt>Item 1</dt> <dd>Value 1</dd></dl><Separator /><dl> <dt>Item 2</dt> <dd>Value 2</dd></dl>API Reference
Separator takes every prop of Base UI's Separator, plus sx, applied last.
| Prop | Values | Default |
|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" |