Divider The Divider component is used to visually separate content into distinct sections. It can be oriented horizontally or vertically. You can also add text or icons within the divider to provide more context. It helps in organizing information and improving the readability of complex page layouts.
Basic Usage
Copy Code
<div class="divider"></div>Divider Directions Horizontal Divider
Copy Code
<div class="divider divider-x"></div>Vertical Divider
Copy Code
<div class="flex gap-4 w-full">
<div class="card card-outline w-full">
<div class="card-body">content 1</div>
</div>
<div class="h-auto">
<div class="divider divider-y"></div>
</div>
<div class="card card-outline w-full">
<div class="card-body">content 2</div>
</div>
</div>Divider with Text Horizontal with Text
Copy Code
<div class="divider divider-x">OR</div>Vertical with Text
Copy Code
<div class="flex gap-4 w-full">
<div class="card card-outline w-full">
<div class="card-body">content 1</div>
</div>
<div class="h-auto">
<div class="divider divider-y">OR</div>
</div>
<div class="card card-outline w-full">
<div class="card-body">content 2</div>
</div>
</div>Divider Colors
Default
Neutral
Primary
Secondary
Accent
Success
Warning
Info
Error
Copy Code
<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
Copy Code
<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
Copy Code
<div class="flex justify-center w-full h-64 gap-12">
<div class="divider divider-y divider-start">Start</div>
<div class="divider divider-y">Default</div>
<div class="divider divider-y divider-end">End</div>
</div>