Layout
Separator
Visually divides content sections, so that a clear visual hierarchy is generated and improves content readability.
Overview
The Separator component draws a horizontal or vertical line between content sections to create clear visual hierarchy and improve readability.
Key Business & UX Benefits
- Divides sections clearly so users can scan and find content faster.
- Keeps spacing and alignment consistent without custom borders.
- Supports horizontal and vertical orientation for lists and sidebars.
- Uses theme styling so separators match the rest of the UI.
Pro-Tip from Larry: Use horizontal separators between sections and vertical ones in tight lists or sidebars.
Usage
Separator Horizontal
<Separator />
Separator Vertical
<Separator orientation="vertical" />
Feature List
- Horizontal and vertical orientation
- Theme-aligned color and thickness
- Accessible with decorative role when non-interactive
- Consistent spacing for section division
API Reference
| Prop | Default | Type |
|---|---|---|
orientation | horizontal | "horizontal" | "vertical" |
margin | 0 | string |
color | var(--seperator) | string |
lineStyle | solid | "solid" | "dashed" | "dotted" |
thickness | 1 | number |