ディバイダーコンポーネント
CSS のみの Tailwind CSS ディバイダー - 水平および垂直、オプションの中央ラベル付き。色とサイズのバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
Divider components create visual separation between content sections. Lightweight and semantic, dividers help structure information hierarchically and improve readability. The Frutjam divider system supports horizontal and vertical orientations with optional text content for labeled separations between sections.
CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| Class | Type | Description |
|---|---|---|
| divider | Base | Horizontal rule with optional centered label text |
| divider-horizontal | Modifier | Horizontal orientation (default) |
| divider-vertical | Modifier | Vertical orientation |
| divider-start | Modifier | Aligns label text to the start |
| divider-end | Modifier | Aligns label text to the end |
| divider-solid | Style | Solid line style |
| divider-dashed | Style | Dashed line style |
| divider-dotted | Style | Dotted line style |
| divider-primary | Color | Primary theme color |
| divider-secondary | Color | Secondary theme color |
| divider-accent | Color | Accent theme color |
| divider-neutral | Color | Neutral theme color |
| divider-info | Color | Info semantic color |
| divider-success | Color | Success semantic color |
| divider-warning | Color | Warning semantic color |
| divider-error | Color | Error semantic color |
Basic Usage
<div class="divider"></div> |
<div className="divider"></div> |
Divider Directions
Horizontal Divider
html
<div class="divider divider-horizontal"></div> |
Vertical Divider
content 1
content 2
html
1 2 3 4 5 6 7 8 9 | <div class="flex gap-4 w-full"> <div class="card card-outline w-full"> <div class="card-content">content 1</div> </div> <div class="divider divider-vertical"></div> <div class="card card-outline w-full"> <div class="card-content">content 2</div> </div> </div> |
Divider with Text
Horizontal with Text
OR
html
<div class="divider divider-horizontal">OR</div> |
Vertical with Text
content 1
OR
content 2
html
1 2 3 4 5 6 7 8 9 | <div class="flex gap-4 w-full"> <div class="card card-outline w-full"> <div class="card-content">content 1</div> </div> <div class="divider divider-vertical">OR</div> <div class="card card-outline w-full"> <div class="card-content">content 2</div> </div> </div> |
Divider Colors
Default
Neutral
Primary
Secondary
Accent
Success
Warning
Info
Error
html
1 2 3 4 5 6 7 8 9 10 11 | <div class="flex flex-col gap-8 w-full"> <div class="divider">Default</div> <div class="divider divider-neutral">Neutral</div> <div class="divider divider-primary">Primary</div> <div class="divider divider-secondary">Secondary</div> <div class="divider divider-accent">Accent</div> <div class="divider divider-success">Success</div> <div class="divider divider-warning">Warning</div> <div class="divider divider-info">Info</div> <div class="divider divider-error">Error</div> </div> |
Divider Content Positions
You can align the text within a divider to the start, center (default), or end of the line.
Horizontal Positions
Start
Default
End
html
1 2 3 4 5 | <div class="flex w-full gap-8 flex-col"> <div class="divider divider-start">Start</div> <div class="divider">Default</div> <div class="divider divider-end">End</div> </div> |
Vertical Positions
Start
Default
End
html
1 2 3 4 5 | <div class="flex justify-center w-full h-64 gap-12"> <div class="divider divider-vertical divider-start">Start</div> <div class="divider divider-vertical">Default</div> <div class="divider divider-vertical divider-end">End</div> </div> |