Separator
Layout
Visually or semantically separates content. Supports horizontal and vertical orientations.
Horizontal
The default separator orientation divides content vertically.
LuckyUI Design System
A beautiful and accessible component library.
Built with Radix
Primitives that provide accessibility out of the box.
Styled with Tailwind
Utility-first CSS for rapid development.
Vertical
Use vertical separators to divide content horizontally.
Home
Documentation
Components
GitHub
Navigation Example
Separators work great in navigation and breadcrumbs.
DocsComponentsSeparator
In Cards
Separators help structure card content.
Order Summary
Subtotal$99.00
Shipping$4.99
Tax$8.32
Total$112.31
Text Divider
Create text dividers by combining separators with text.
OR
Continue with
Custom Styling
Separators can be customized with className.
Default
Thicker
Colored
Partial width