Separator
v1.0.2Updated 20 Jul 2026Thin horizontal or vertical divider line (Radix). Adds an optional label, icon, and dashed variant for richer section dividers.
Preview
Live · 9 storiesHorizontalOpen ↗
▸Why this is recommendeddividerrulespacerlabel+1
Separator — horizontal.
Recommended for+14
- ✓Separating menu groups
- ✓Splitting card sections
- ✓Section dividers with labels (e.g., "or")
- ✓Vertical dividers between toolbar groups
Tags+6
dividerrulespacerlabelhorizontal
Features+4
- Horizontal / vertical
- Decorative or semantic role
- Label slot in the middle of the rule
- Icon slot
- Dashed variant
Not recommended for−2
- ✕Adding margin (use spacing tokens)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
orientationDirection
—labelLabel rendered inline with the rule
—iconInline icon
—dashedDashed rule style
—