Separator
Visual content divider
The Separator component provides a visual divider to separate content sections.
Basic Usage
<div>
<p>Content above</p>
<Separator />
<p>Content below</p>
</div>Horizontal Separator
<div class="space-y-4">
<div>Section 1</div>
<Separator />
<div>Section 2</div>
<Separator />
<div>Section 3</div>
</div>Vertical Separator
<div class="flex items-center gap-4">
<span>Left</span>
<Separator Orientation="vertical" />
<span>Center</span>
<Separator Orientation="vertical" />
<span>Right</span>
</div>In Navigation
<nav class="flex items-center gap-4">
<a href="/">Home</a>
<Separator Orientation="vertical" />
<a href="/docs">Docs</a>
<Separator Orientation="vertical" />
<a href="/about">About</a>
</nav>In Lists
<div class="space-y-2">
<div class="p-4">Item 1</div>
<Separator />
<div class="p-4">Item 2</div>
<Separator />
<div class="p-4">Item 3</div>
</div>API Reference
| Property | Type | Default | Description |
|---|---|---|---|
Orientation | string | horizontal | Separator orientation |
ClassName | string | "" | Additional CSS classes |
Orientation Options
horizontal- Horizontal dividervertical- Vertical divider
Installation
shellui add separator