Divider Components

1. Basic Divider Styles

Thin, thick, dashed, dotted, and gradient dividers. Pure CSS, no scripts.

Thin

Thick

Dashed

Dotted

Gradient

<div class="space-y-6 rounded-xl border border-black/10 bg-white p-6 shadow-sm">
  <h3 class="font-semibold text-gray-900">Thin</h3>
  <hr class="border-gray-200">

  <h3 class="font-semibold text-gray-900">Thick</h3>
  <hr class="border-gray-300 border-2">

  <h3 class="font-semibold text-gray-900">Dashed</h3>
  <hr class="border-gray-300 border-dashed">

  <h3 class="font-semibold text-gray-900">Dotted</h3>
  <hr class="border-gray-300 border-dotted">

  <h3 class="font-semibold text-gray-900">Gradient</h3>
  <div class="h-px w-full bg-gradient-to-r from-transparent via-violet to-transparent"></div>
</div>

<template>
  <div class="space-y-6 rounded-xl border border-black/10 bg-white p-6 shadow-sm">
    <h3 class="font-semibold text-gray-900">Thin</h3>
    <hr class="border-gray-200" />

    <h3 class="font-semibold text-gray-900">Thick</h3>
    <hr class="border-gray-300 border-2" />

    <h3 class="font-semibold text-gray-900">Dashed</h3>
    <hr class="border-gray-300 border-dashed" />

    <h3 class="font-semibold text-gray-900">Dotted</h3>
    <hr class="border-gray-300 border-dotted" />

    <h3 class="font-semibold text-gray-900">Gradient</h3>
    <div class="h-px w-full bg-gradient-to-r from-transparent via-violet to-transparent" />
  </div>
</template>

<script setup>
// UI-only
</script>

import React from 'react'

export default function BasicDividers() {
  return (
    <div className="space-y-6 rounded-xl border border-black/10 bg-white p-6 shadow-sm">
      <h3 className="font-semibold text-gray-900">Thin</h3>
      <hr className="border-gray-200" />

      <h3 className="font-semibold text-gray-900">Thick</h3>
      <hr className="border-gray-300 border-2" />

      <h3 className="font-semibold text-gray-900">Dashed</h3>
      <hr className="border-gray-300 border-dashed" />

      <h3 className="font-semibold text-gray-900">Dotted</h3>
      <hr className="border-gray-300 border-dotted" />

      <h3 className="font-semibold text-gray-900">Gradient</h3>
      <div className="h-px w-full bg-gradient-to-r from-transparent via-violet to-transparent" />
    </div>
  )
}

2. Centered Label & Icon

A divider with text or an icon in the center, using flex and utility classes.

Continue

<!-- Text label -->
<div class="flex items-center gap-3 text-sm text-gray-600">
  <div class="h-px flex-1 bg-gray-200"></div>
  <span class="inline-flex items-center rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium shadow-sm">Continue</span>
  <div class="h-px flex-1 bg-gray-200"></div>
</div>

<!-- Icon label -->
<div class="flex items-center gap-3">
  <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
  <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-violet text-white shadow ring-1 ring-black/10">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.97a1 1 0 00.95.69h4.177c.969 0 1.371 1.24.588 1.81l-3.381 2.457a1 1 0 00-.364 1.118l1.287 3.97c.3.921-.755 1.688-1.54 1.118l-3.381-2.457a1 1 0 00-1.176 0l-3.38 2.457c-.786.57-1.842-.197-1.541-1.118l1.287-3.97a1 1 0 00-.364-1.118L2.96 9.397c-.783-.57-.38-1.81.588-1.81h4.178a1 1 0 00.949-.69l1.286-3.97z"/>
    </svg>
  </span>
  <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
</div>

<template>
  <!-- Text label -->
  <div class="flex items-center gap-3 text-sm text-gray-600">
    <div class="h-px flex-1 bg-gray-200" />
    <span class="inline-flex items-center rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium shadow-sm">Continue</span>
    <div class="h-px flex-1 bg-gray-200" />
  </div>

  <!-- Icon label -->
  <div class="flex items-center gap-3 mt-10">
    <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent" />
    <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-violet text-white shadow ring-1 ring-black/10">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.97a1 1 0 00.95.69h4.177c.969 0 1.371 1.24.588 1.81l-3.381 2.457a1 1 0 00-.364 1.118l1.287 3.97c.3.921-.755 1.688-1.54 1.118l-3.381-2.457a1 1 0 00-1.176 0l-3.38 2.457c-.786.57-1.842-.197-1.541-1.118l1.287-3.97a1 1 0 00-.364-1.118L2.96 9.397c-.783-.57-.38-1.81.588-1.81h4.178a1 1 0 00.949-.69l1.286-3.97z" />
      </svg>
    </span>
    <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent" />
  </div>
</template>

<script setup>
// UI-only
</script>

import React from 'react'

export default function CenteredLabelDivider() {
  return (
    <div className="space-y-10">
      <div className="flex items-center gap-3 text-sm text-gray-600">
        <div className="h-px flex-1 bg-gray-200" />
        <span className="inline-flex items-center rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium shadow-sm">Continue</span>
        <div className="h-px flex-1 bg-gray-200" />
      </div>

      <div className="flex items-center gap-3">
        <div className="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent" />
        <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-violet text-white shadow ring-1 ring-black/10">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.97a1 1 0 00.95.69h4.177c.969 0 1.371 1.24.588 1.81l-3.381 2.457a1 1 0 00-.364 1.118l1.287 3.97c.3.921-.755 1.688-1.54 1.118l-3.381-2.457a1 1 0 00-1.176 0l-3.38 2.457c-.786.57-1.842-.197-1.541-1.118l1.287-3.97a1 1 0 00-.364-1.118L2.96 9.397c-.783-.57-.38-1.81.588-1.81h4.178a1 1 0 00.949-.69l1.286-3.97z" />
          </svg>
        </span>
        <div className="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 to-transparent" />
      </div>
    </div>
  )
}

3. Section Divider with Actions

A divider that doubles as a small toolbar (e.g., “Activity” with action buttons).

Activity

<div class="flex items-center gap-3 text-sm">
  <div class="h-px flex-1 bg-gray-200"></div>

  <div class="inline-flex items-center gap-3 rounded-full bg-white px-3 py-1.5 shadow ring-1 ring-black/10">
    <span class="font-medium text-gray-900">Activity</span>
    <span class="inline-flex h-6 w-px bg-gray-200" aria-hidden="true"></span>

    <button type="button" class="rounded-md border border-black/10 px-2.5 py-1 text-gray-700 hover:bg-gray-50">View all</button>
    <button type="button" class="inline-flex items-center rounded-md bg-violet px-2.5 py-1 font-semibold text-white shadow ring-1 ring-black/10">
      <svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m7-7H5"/>
      </svg>
      Add
    </button>
  </div>

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

<template>
  <div class="flex items-center gap-3 text-sm">
    <div class="h-px flex-1 bg-gray-200" />

    <div class="inline-flex items-center gap-3 rounded-full bg-white px-3 py-1.5 shadow ring-1 ring-black/10">
      <span class="font-medium text-gray-900">Activity</span>
      <span class="inline-flex h-6 w-px bg-gray-200" aria-hidden="true" />

      <button type="button" class="rounded-md border border-black/10 px-2.5 py-1 text-gray-700 hover:bg-gray-50">View all</button>
      <button type="button" class="inline-flex items-center rounded-md bg-violet px-2.5 py-1 font-semibold text-white shadow ring-1 ring-black/10">
        <svg xmlns="http://www.w3.org/2000/svg" class="mr-1.5 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m7-7H5" />
        </svg>
        Add
      </button>
    </div>

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

<script setup>
// UI-only
</script>

import React from 'react'

export default function ActionDivider() {
  return (
    <div className="flex items-center gap-3 text-sm">
      <div className="h-px flex-1 bg-gray-200" />

      <div className="inline-flex items-center gap-3 rounded-full bg-white px-3 py-1.5 shadow ring-1 ring-black/10">
        <span className="font-medium text-gray-900">Activity</span>
        <span className="inline-flex h-6 w-px bg-gray-200" aria-hidden="true" />

        <button type="button" className="rounded-md border border-black/10 px-2.5 py-1 text-gray-700 hover:bg-gray-50">View all</button>
        <button type="button" className="inline-flex items-center rounded-md bg-violet px-2.5 py-1 font-semibold text-white shadow ring-1 ring-black/10">
          <svg xmlns="http://www.w3.org/2000/svg" className="mr-1.5 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 5v14m7-7H5" />
          </svg>
          Add
        </button>
      </div>

      <div className="h-px flex-1 bg-gray-200" />
    </div>
  )
}

4. Title + Subtitle Chip

A centered chip that shows a title and a small subtitle, flanked by soft gradient lines.

Specifications What’s included

<div class="flex items-center gap-4">
  <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-200 to-transparent"></div>
  <div class="text-center">
    <div class="px-3 py-1.5 rounded-full bg-white shadow ring-1 ring-black/10 min-w-[12rem]">
      <span class="block text-sm font-semibold text-gray-900">Specifications</span>
      <span class="block text-xs text-gray-500">What’s included</span>
    </div>
  </div>
  <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-200 to-transparent"></div>
</div>

<template>
  <div class="flex items-center gap-4">
    <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
    <div class="text-center">
      <div class="px-3 py-1.5 rounded-full bg-white shadow ring-1 ring-black/10 min-w-[12rem]">
        <span class="block text-sm font-semibold text-gray-900">Specifications</span>
        <span class="block text-xs text-gray-500">What’s included</span>
      </div>
    </div>
    <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
  </div>
</template>

<script setup>
// UI-only
</script>

import React from 'react'

export default function TitleSubtitleDivider() {
  return (
    <div className="flex items-center gap-4">
      <div className="h-px flex-1 bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
      <div className="text-center">
        <div className="px-3 py-1.5 rounded-full bg-white shadow ring-1 ring-black/10 min-w-[12rem]">
          <span className="block text-sm font-semibold text-gray-900">Specifications</span>
          <span className="block text-xs text-gray-500">What’s included</span>
        </div>
      </div>
      <div className="h-px flex-1 bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
    </div>
  )
}

5. Timeline Date Divider

Great for activity feeds—shows a date chip in the middle with straight lines on both sides.

Jan 15, 2025

<div class="flex items-center gap-3">
  <div class="h-px flex-1 bg-gray-200"></div>
  <span class="inline-flex items-center gap-2 rounded-full bg-gray-900 text-white px-3 py-1.5 shadow ring-1 ring-black/10">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
    </svg>
    <span class="text-sm font-medium">Jan 15, 2025</span>
  </span>
  <div class="h-px flex-1 bg-gray-200"></div>
</div>

<template>
  <div class="flex items-center gap-3">
    <div class="h-px flex-1 bg-gray-200" />
    <span class="inline-flex items-center gap-2 rounded-full bg-gray-900 text-white px-3 py-1.5 shadow ring-1 ring-black/10">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
      <span class="text-sm font-medium">Jan 15, 2025</span>
    </span>
    <div class="h-px flex-1 bg-gray-200" />
  </div>
</template>

<script setup>
// UI-only
</script>

import React from 'react'

export default function TimelineDateDivider() {
  return (
    <div className="flex items-center gap-3">
      <div className="h-px flex-1 bg-gray-200" />
      <span className="inline-flex items-center gap-2 rounded-full bg-gray-900 text-white px-3 py-1.5 shadow ring-1 ring-black/10">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
        <span className="text-sm font-medium">Jan 15, 2025</span>
      </span>
      <div className="h-px flex-1 bg-gray-200" />
    </div>
  )
}

6. Decorative SVG Wave

A section break using an SVG wave. Useful between contrasting sections.

Content Above

Use an SVG wave as a visual section break.

Content Below

Layers nicely with light backgrounds.

<div class="rounded-xl overflow-hidden border border-black/10 bg-white shadow-sm">
  <div class="p-6">
    <h3 class="text-lg font-semibold text-gray-900">Content Above</h3>
    <p class="text-gray-600 mt-1">Use an SVG wave as a visual section break.</p>
  </div>

  <svg viewBox="0 0 1200 100" preserveAspectRatio="none" class="w-full h-10 text-gray-100">
    <path d="M0,0 C150,100 350,0 600,50 C850,100 1050,0 1200,50 L1200,100 L0,100 Z" fill="currentColor"></path>
  </svg>

  <div class="p-6 bg-gray-50">
    <h3 class="text-lg font-semibold text-gray-900">Content Below</h3>
    <p class="text-gray-600 mt-1">Layers nicely with light backgrounds.</p>
  </div>
</div>

<template>
  <div class="rounded-xl overflow-hidden border border-black/10 bg-white shadow-sm">
    <div class="p-6">
      <h3 class="text-lg font-semibold text-gray-900">Content Above</h3>
      <p class="text-gray-600 mt-1">Use an SVG wave as a visual section break.</p>
    </div>
    <svg viewBox="0 0 1200 100" preserveAspectRatio="none" class="w-full h-10 text-gray-100">
      <path d="M0,0 C150,100 350,0 600,50 C850,100 1050,0 1200,50 L1200,100 L0,100 Z" fill="currentColor" />
    </svg>
    <div class="p-6 bg-gray-50">
      <h3 class="text-lg font-semibold text-gray-900">Content Below</h3>
      <p class="text-gray-600 mt-1">Layers nicely with light backgrounds.</p>
    </div>
  </div>
</template>

<script setup>
// UI-only
</script>

import React from 'react'

export default function WaveDividerCard() {
  return (
    <div className="rounded-xl overflow-hidden border border-black/10 bg-white shadow-sm">
      <div className="p-6">
        <h3 className="text-lg font-semibold text-gray-900">Content Above</h3>
        <p className="text-gray-600 mt-1">Use an SVG wave as a visual section break.</p>
      </div>
      <svg viewBox="0 0 1200 100" preserveAspectRatio="none" className="w-full h-10 text-gray-100">
        <path d="M0,0 C150,100 350,0 600,50 C850,100 1050,0 1200,50 L1200,100 L0,100 Z" fill="currentColor" />
      </svg>
      <div className="p-6 bg-gray-50">
        <h3 className="text-lg font-semibold text-gray-900">Content Below</h3>
        <p className="text-gray-600 mt-1">Layers nicely with light backgrounds.</p>
      </div>
    </div>
  )
}