How to Use
Divider
Divider visually separates content sections with a horizontal or vertical line. It can optionally display a text label in the center (e.g., "OR" between login options). Use dividers to create visual hierarchy and breathing room between distinct sections of content.
Horizontal Section Separator
A horizontal divider (default orientation) separates stacked content sections. Use it between form sections, card sections, or any vertically stacked content groups. The divider spans its container width. Add spacing around it with margin or padding on parent elements.
<div className="space-y-3">
<div>
<h3>Personal Information</h3>
<p className="text-sm">Name, email, phone</p>
</div>
<Divider />
<div>
<h3>Address</h3>
<p className="text-sm">Street, city, zip</p>
</div>
</div>Vertical Divider
Use orientation="vertical" to separate items in a flex row layout. The parent element must have a defined height — vertical dividers stretch to fill their parent's height. Ideal for toolbar button groups, breadcrumb separators, and inline metadata between text items.
<div className="flex h-10 items-center gap-3">
<span className="text-sm">Home</span>
<Divider orientation="vertical" />
<span className="text-sm">Products</span>
<Divider orientation="vertical" />
<span className="text-sm">Details</span>
</div>Labeled Divider
Pass children to render a text label centered on the divider line. This is commonly used for "OR" separators between different authentication methods (social login vs. email), or between sections where you want to explain the separation. The label sits on top of the line with a background that masks the line behind it.
<div className="w-full max-w-sm">
<Divider>OR</Divider>
</div>Props Reference
All available props for Divider. See the full API reference page for interactive playground examples.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Divider orientation. |
| variant | "solid" | "soft" | "bordered" | "solid" | Divider variant. |
| color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "default" | Divider color. |
| thickness | number | string | — | Custom thickness value. |
Best Practices
- ◆Use horizontal dividers sparingly — too many creates visual noise and defeats the purpose of separation
- ◆Vertical dividers need a fixed height on the parent element to render correctly; flex parent with h-full works too
- ◆Labeled dividers are great for separating alternative flows — "OR" between sign in and social login, or "NEW" between sections
- ◆Use margins (not padding) around dividers to create proper spacing — the divider itself has minimal inherent spacing