Separator
Visual divider for separating content sections. Supports horizontal and vertical orientations with solid, dashed, and dotted variants.
When to use Separator vs. Divider
Use Separator for a pure line between content sections — menus, card rows, list items. Minimal API, no label support.
Reach for Divider when you need a labeled break — e.g., "OR" between login options, "Today" in a feed, or a date header in a timeline.
Preview
Horizontal separator between content sections
Eidetic Design System
A comprehensive component library
Components
Over 100 production-ready components
Variants
Different visual styles for separators
Default (Solid)
Dashed
Dotted
Vertical Separator
Divide content horizontally with vertical lines
In Menus
Separate menu sections
Props
Separator component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction of the separator line |
variant | 'default' | 'dashed' | 'dotted' | 'default' | Visual style of the separator |
decorative | boolean | true | If true, separator has no ARIA role (purely visual) |
className | string | — | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | — | All standard div attributes are supported |
Usage
Import and implementation example
import { Separator } from '@/components/ui/separator'
export default function Example() { return ( <> {/* Horizontal (default) */} <div> <p>Section 1</p> <Separator /> <p>Section 2</p> </div>
{/* Vertical */} <div className="flex h-10 items-center"> <span>Item 1</span> <Separator orientation="vertical" /> <span>Item 2</span> </div>
{/* Variants */} <Separator variant="default" /> <Separator variant="dashed" /> <Separator variant="dotted" />
{/* Custom spacing */} <Separator className="my-4" />
{/* Semantic separator (not decorative) */} <Separator decorative={false} /> </> )}Features
Built-in functionality
- Two orientations: Horizontal and vertical layout options
- Multiple variants: Solid, dashed, and dotted line styles
- Decorative mode: Option to exclude from accessibility tree
- Customizable: Override styles with className
- Forward ref: Supports ref forwarding for DOM access
- Dark mode: Adapts to light and dark themes
Accessibility
ARIA support and semantic roles
ARIA Attributes
role="separator" when decorative={false}role="none" when decorative={true}aria-orientation for vertical separatorsKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Separator is not interactive |
Notes
- Use decorative={false} for meaningful content divisions
- Keep decorative={true} for purely visual separators
- Separator does not trap focus or interfere with navigation