Skip to content
HyperUI

No results found.

Back to application components

Dividers

Responsive layout divider components with basic, gradient, and aligned styles for separating content sections in web applications and UI designs.

6/6 Dark Mode Updated: Nov 4, 2025

Base

markmead

<span class="flex items-center">
  <span class="h-px flex-1 bg-gray-300"></span>

  <span class="shrink-0 px-4 text-gray-900">Title goes here</span>

  <span class="h-px flex-1 bg-gray-300"></span>
</span>

Base (Dark)

markmead

<span class="flex items-center">
  <span class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></span>

  <span class="shrink-0 px-4 text-gray-900 dark:text-white"> Title goes here </span>

  <span class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></span>
</span>

Gradient

markmead

<span class="flex items-center">
  <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-300"></span>

  <span class="shrink-0 px-4 text-gray-900">Title goes here</span>

  <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-300"></span>
</span>

Gradient (Dark)

markmead

<span class="flex items-center">
  <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-300 dark:to-gray-600"></span>

  <span class="shrink-0 px-4 text-gray-900 dark:text-white">Title goes here</span>

  <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-300 dark:to-gray-600"></span>
</span>

Left align

markmead

<span class="flex items-center">
  <span class="shrink-0 pe-4 text-gray-900">Title goes here</span>

  <span class="h-px flex-1 bg-gray-300"></span>
</span>

Left align (Dark)

markmead

<span class="flex items-center">
  <span class="shrink-0 pe-4 text-gray-900 dark:text-white"> Title goes here </span>

  <span class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></span>
</span>

Left align gradient

markmead

<span class="flex items-center">
  <span class="shrink-0 pe-4 text-gray-900">Title goes here</span>

  <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-300"></span>
</span>

Left align gradient (Dark)

markmead

<span class="flex items-center">
  <span class="shrink-0 pe-4 text-gray-900 dark:text-white"> Title goes here </span>

  <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-300 dark:to-gray-600"></span>
</span>

Right align

markmead

<span class="flex items-center">
  <span class="h-px flex-1 bg-gray-300"></span>

  <span class="shrink-0 ps-4 text-gray-900">Title goes here</span>
</span>

Right align (Dark)

markmead

<span class="flex items-center">
  <span class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></span>

  <span class="shrink-0 ps-4 text-gray-900 dark:text-white"> Title goes here </span>
</span>

Right align gradient

markmead

<span class="flex items-center">
  <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-300"></span>

  <span class="shrink-0 ps-4 text-gray-900">Title goes here</span>
</span>

Right align gradient (Dark)

markmead

<span class="flex items-center">
  <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-300 dark:to-gray-600"></span>

  <span class="shrink-0 ps-4 text-gray-900 dark:text-white"> Title goes here </span>
</span>

Related components

View all application components