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.

Dark ModeUpdated: Nov 4, 2025

Base

markmead

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

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

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

Base (Dark)

markmead

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

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

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

Gradient

markmead

<span class="flex items-center">
  <span class="h-px flex-1 bg-linear-to-r from-transparent to-gray-200"></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-200"></span>
</span>

Gradient (Dark)

markmead

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

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

  <span class="h-px flex-1 bg-linear-to-l from-transparent to-gray-200 dark:to-gray-700"></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-200"></span>
</span>

Left align (Dark)

markmead

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

  <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></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-200"></span>
</span>

Left align gradient (Dark)

markmead

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

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

Right align

markmead

<span class="flex items-center">
  <span class="h-px flex-1 bg-gray-200"></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-200 dark:bg-gray-700"></span>

  <span class="shrink-0 ps-4 text-gray-900 dark:text-gray-50">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-200"></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-200 dark:to-gray-700"></span>

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

Related components

View all application components