- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
A simple, accessible separator component for visually dividing content sections. Built on Radix UI primitives with customizable orientation and styling.
Basic Usage
The most common usage is a horizontal separator to divide content vertically.
Section One
This is the first section of content.
Section Two
This is the second section of content.
Vertical Separator
Use orientation="vertical" to create a vertical divider for side-by-side content.
Left Content
Details here
Right Content
More details
In Lists
Separators are commonly used between list items to create clear visual separation.
Recent Activity
Your latest actions and updates
Profile Updated
2 hours ago
Document Shared
5 hours ago
Task Completed
Yesterday
Custom Styling
Override the default styles with the className prop for custom colors, thickness, or spacing.
Thicker separator
Custom color
Dashed style
Gradient separator
In Cards
Separators work well within cards to organize different sections of content.
Account Settings
Manage your account preferences
With Text Labels
Create section headers with inline text and separator lines.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the separator |
decorative | boolean | true | When true, the separator is purely visual and ignored by screen readers |
className | string | - | Additional CSS classes for custom styling |