Divider

<div class="divider"></div>
<div class="divider">OR</div>
<div class="divider">Section</div>

Requires: ux.min.css

<div class="flex items-center my-4 text-sm opacity-50">
  <span class="flex-1 h-px bg-base-300"></span>
</div>
<div class="flex items-center my-4 text-sm opacity-50">
  <span class="flex-1 h-px bg-base-300 mr-3"></span>
  OR
  <span class="flex-1 h-px bg-base-300 ml-3"></span>
</div>
<div class="flex items-center my-4 text-sm opacity-50">
  <span class="flex-1 h-px bg-base-300 mr-3"></span>
  Section
  <span class="flex-1 h-px bg-base-300 ml-3"></span>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<div class="divider">Solid</div>
<div class="divider divider-dashed">Dashed</div>
<div class="divider divider-dotted">Dotted</div>
<div class="divider divider-gradient"></div>

Requires: ux.min.css

<!-- Dashed, dotted, and gradient dividers use repeating-linear-gradient -->
<!-- Use semantic classes for these styles -->
<div class="divider">Solid</div>
<div class="divider divider-dashed">Dashed</div>
<div class="divider divider-dotted">Dotted</div>
<div class="divider divider-gradient"></div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<div class="divider color-primary">Primary</div>
<div class="divider color-success">Success</div>
<div class="divider color-error">Error</div>

Requires: ux.min.css

<div class="flex items-center my-4 text-sm opacity-50">
  <span class="flex-1 h-px bg-primary mr-3"></span>
  <span class="text-primary">Primary</span>
  <span class="flex-1 h-px bg-primary ml-3"></span>
</div>
<div class="flex items-center my-4 text-sm opacity-50">
  <span class="flex-1 h-px bg-success mr-3"></span>
  <span class="text-success">Success</span>
  <span class="flex-1 h-px bg-success ml-3"></span>
</div>
<div class="flex items-center my-4 text-sm opacity-50">
  <span class="flex-1 h-px bg-error mr-3"></span>
  <span class="text-error">Error</span>
  <span class="flex-1 h-px bg-error ml-3"></span>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<div style="display: flex; align-items: center; gap: 0; height: 3rem;">
  <span>Left</span>
  <div class="divider divider-vertical"></div>
  <span>Right</span>
</div>

Requires: ux.min.css

<div class="flex items-center h-12">
  <span>Left</span>
  <div class="flex flex-col self-stretch w-px mx-4">
    <span class="flex-1 bg-base-300"></span>
  </div>
  <span>Right</span>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<div class="divider divider-start">Start</div>
<div class="divider">Center (default)</div>
<div class="divider divider-end">End</div>

Requires: ux.min.css

<!-- Text alignment uses flex proportions -->
<!-- Use semantic classes for positioning -->
<div class="divider divider-start">Start</div>
<div class="divider">Center (default)</div>
<div class="divider divider-end">End</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component