Separator
Visually divides content sections. Supports horizontal and vertical orientations with automatic RTL adaptation.
Preview
Content above separator
Content below separator
Installation
Usage
Examples
Horizontal
Section One
First section content
Section Two
Second section content
Section Three
Third section content
Vertical
In Cards
User Profile
Manage your profile settings
Personal Information
Update your personal details
Account Settings
Manage your account preferences
Privacy & Security
Control your privacy settings
In Navigation
In Lists
- Dashboard
- Settings
- Profile
- Notifications
Custom Styling
Thicker Separator
Primary Color
Dashed Style
Gradient Style
Props
| Name | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the separator |
decorative | boolean | true | Whether the separator is purely decorative (not semantic) |
className | string | undefined | Additional CSS classes to apply |
The Separator component extends Radix UI's Separator primitive and accepts all standard HTML attributes.
Accessibility
Decorative vs Semantic
The decorative prop determines how the separator is announced to screen readers:
- •decorative={true} (default): Not announced by screen readers, purely visual
- •decorative={false}: Announced as a separator with semantic meaning
When to Use Semantic Separators
Use decorative={false} when the separator has semantic importance, such as dividing major sections of content. Use the default decorative mode for purely visual spacing.
ARIA Role
When not decorative, the component automatically applies role="separator" and appropriate ARIA attributes based on orientation.
RTL Considerations
Separators work identically in both LTR and RTL layouts. Horizontal separators span the full width, and vertical separators maintain their height regardless of text direction.
LTR (English)
RTL (العربية)
Best Practices
Do
- ✓ Use separators to create visual hierarchy
- ✓ Use horizontal separators to divide vertical content
- ✓ Use vertical separators in horizontal layouts (navigation, toolbars)
- ✓ Keep separator styling subtle and consistent
- ✓ Use decorative={true} for purely visual separators
Don't
- ✗ Don't overuse separators - they can clutter the interface
- ✗ Don't use separators when whitespace alone would suffice
- ✗ Don't make separators too prominent or distracting
- ✗ Don't use different separator styles inconsistently
- ✗ Don't forget to set proper orientation for the layout