Divider
Material Design 3 divider component for separating content
Divider
Dividers separate content into clear groups. Place any content inside .divider and it will appear centered between two line segments.
Basic Usage
Plain Divider
html
<div class="divider"></div>Divider with Text
OR
html
<div class="divider">OR</div>Divider with Icon
✦
html
<div class="divider">✦</div>Content Positioning
Content Position
Section Title
Centered
End
html
<div class="divider divider-start">Section Title</div>
<div class="divider">Centered</div>
<div class="divider divider-end">End</div>Orientation
Horizontal (Default)
Horizontal Divider
Content above
OR
Content below
html
<div>Content above</div>
<div class="divider">OR</div>
<div>Content below</div>Vertical
Vertical Divider
Left
Right
html
<div class="flex items-center h-16">
<span>Left</span>
<div class="divider divider-vertical"></div>
<span>Right</span>
</div>Vertical with Text
Section A
OR
Section B
html
<div class="flex items-center h-24">
<span>Section A</span>
<div class="divider divider-vertical">OR</div>
<span>Section B</span>
</div>Styles
Solid (Default)
Solid Divider
Solid
html
<div class="divider">Solid</div>Dashed
Dashed Divider
Dashed
html
<div class="divider divider-dashed">Dashed</div>Dotted
Dotted Divider
Dotted
html
<div class="divider divider-dotted">Dotted</div>Thickness
Divider Thickness
Thin
Default
Medium
Thick
html
<div class="divider divider-thin">Thin</div>
<div class="divider">Default</div>
<div class="divider divider-medium">Medium</div>
<div class="divider divider-thick">Thick</div>Colors
Colored Dividers
Primary
Secondary
Tertiary
Success
Warning
Error
html
<div class="divider divider-primary">Primary</div>
<div class="divider divider-secondary">Secondary</div>
<div class="divider divider-tertiary">Tertiary</div>
<div class="divider divider-success">Success</div>
<div class="divider divider-warning">Warning</div>
<div class="divider divider-error">Error</div>Gradient
Gradient Divider
OR
html
<div class="divider divider-gradient">OR</div>Spacing
Divider Spacing
Compact
Default
Comfortable
Spacious
html
<div class="divider divider-compact">Compact</div>
<div class="divider">Default</div>
<div class="divider divider-comfortable">Comfortable</div>
<div class="divider divider-spacious">Spacious</div>Inset
For list items or indented layouts:
Inset Dividers
html
<div class="divider divider-inset"></div>
<div class="divider divider-inset-both"></div>API Reference
| Class | Description |
|---|---|
.divider |
Base divider; content inside appears between lines |
.divider-vertical |
Vertical orientation |
.divider-start |
Content aligned to start |
.divider-end |
Content aligned to end |
.divider-thin |
1px line thickness |
.divider-medium |
2px line thickness |
.divider-thick |
4px line thickness |
.divider-dashed |
Dashed line style |
.divider-dotted |
Dotted line style |
.divider-gradient |
Fades out at edges |
.divider-primary |
Primary color lines |
.divider-secondary |
Secondary color lines |
.divider-tertiary |
Tertiary color lines |
.divider-info |
Info color lines |
.divider-success |
Success color lines |
.divider-warning |
Warning color lines |
.divider-error |
Error color lines |
.divider-compact |
Reduced spacing and gap |
.divider-comfortable |
Increased margin |
.divider-spacious |
Maximum margin and gap |
.divider-inset |
Left-indented |
.divider-inset-both |
Both sides indented |