Separator
Ready
Part of Layout collection
Horizontal Separator
Divide content vertically with horizontal lines
Eidetic Design System
A comprehensive component library
Components
Over 100 production-ready components
Documentation
Comprehensive guides and examples
Separator Variants
Different visual styles for separators
Default (Solid)
Dashed
Dotted
Vertical Separator
Divide content horizontally with vertical lines
DashboardOverview
AnalyticsReports
SettingsPreferences
In Lists
Use separators to divide list items
JD
John Doe
john.doe@example.com
SC
Sarah Chen
sarah.chen@example.com
MJ
Mike Johnson
mike.j@example.com
In Menus
Separate menu sections
Features
- Horizontal and vertical orientation
- Multiple variants (solid, dashed, dotted)
- Accessible with proper ARIA roles
- Decorative mode for visual-only separators
- Customizable with className
Usage
import { Separator } from '@/components/ui/separator'
// Horizontal (default)
<div>
<p>Section 1</p>
<Separator />
<p>Section 2</p>
</div>
// Vertical
<div className="flex h-10">
<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} />