Divider
Visual separator with optional label support for horizontal and vertical layouts.
When to use Divider vs. Separator
Use Divider when the break needs a label — e.g., "OR" between login options, "Today" in a feed, section headers in a settings list.
For a plain unlabeled line between content sections, reach for Separator — it has a smaller API and no flex wrapper overhead.
Preview
Basic divider separating content
Content above
Content below
Variants
Solid, dashed, and dotted line styles
Solid (default)
Dashed
Dotted
With Labels
Add text labels in different positions
Center (default)
Start
End
Spacing
Control vertical margin around the divider
Content above
Content below
Content above
Content below
Content above
Content below
Content above
Content below
Vertical Orientation
Use dividers vertically between inline content
Real-world Example
Login form with social sign-in divider
Sign in
Props
Divider component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'solid' | 'dashed' | 'dotted' | 'solid' | Line style |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Divider direction |
spacing | 'none' | 'sm' | 'md' | 'lg' | 'md' | Margin around divider |
label | ReactNode | — | Optional label text |
labelPosition | 'start' | 'center' | 'end' | 'center' | Label position |
className | string | — | Additional CSS classes |
Usage
Import and implementation example
import { Divider } from '@/components/ui/divider'
export default function Example() { return ( <> {/* Basic divider */} <Divider />
{/* With variant */} <Divider variant="dashed" /> <Divider variant="dotted" />
{/* With label */} <Divider label="OR" /> <Divider label="Section" labelPosition="start" /> <Divider label="More" labelPosition="end" />
{/* With spacing */} <Divider spacing="sm" /> <Divider spacing="md" /> <Divider spacing="lg" />
{/* Vertical orientation */} <div className="flex items-center h-12"> <span>Item 1</span> <Divider orientation="vertical" /> <span>Item 2</span> </div> </> )}Features
Built-in functionality
- Three variants: Solid, dashed, dotted line styles
- Two orientations: Horizontal and vertical
- Label support: Optional text with flexible positioning
- Configurable spacing: None, small, medium, large
- Semantic HTML: Uses role="separator" for accessibility
- Flexible sizing: Adapts to container width/height
- Composable: Works with any layout
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="separator" for semantic meaningaria-orientation indicates directionDecorative dividers can use aria-hiddenKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Divider is not focusable |
Notes
- Screen readers announce separator
- Labels provide additional context
- Consider visual-only decorative dividers
- Maintains document flow