Divider Properties
Visual separators that create hierarchy and organize content. Supports horizontal/vertical orientations, text, icons, and interactive elements.
Component Setup
Create or update your Divider component
Copy this code to create your Divider component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Different Colors
Apply custom colors to dividers to match your design theme.
Line Text
Dividers with text and lines on either side, with multiple alignment options.
Text Dividers
Simple text dividers that separate content with meaningful labels.
Solid Text
Distinct text dividers with solid background for stronger visual separation.
Content
Dividers with interactive elements like buttons for enhanced functionality.
Vertical Orientation
Vertical dividers for separating horizontally aligned content.
API Reference
The Divider component provides a flexible way to create visual separations between content sections.
Divider.Root
Main divider component with support for different orientations and styles.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal""vertical" | "horizontal" | Direction of the divider |
variant | "line""text""solid" | "line" | Visual style variant of the divider |
color | "string" | "border-neutral-200 dark:border-neutral-700" | CSS class for divider color |
align | "center""left""right" | "center" | Alignment of content within the divider |
className | "string" | "undefined" | Additional CSS classes |
Divider.Content
Container for content to be displayed within the divider, such as text or interactive elements.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes |