Separator

A decorative and functional separator component offering multiple visual styles and customizable widths, ideal for section dividers and content organization.

Example

pnpm dlx hybrid-astro-ui@latest add separator

npx hybrid-astro-ui@latest add separator

yarn dlx hybrid-astro-ui@latest add separator

bunx hybrid-astro-ui@latest add separator

---
import { Separator } from "@/src/components/hybrid-astro-ui/separator"
---
<div class="p-8 max-w-xl mx-auto border border-gray-200 rounded-xl bg-gray-50">
  
  <div class="text-center">
    <h3 class="text-lg font-bold text-gray-800">Section One: Introduction</h3>
    <p class="text-sm text-gray-600 mt-2">
      This is the first block of content. It sets the stage for what comes next.
    </p>
  </div>

  {/* Using the simple, medium-width separator for a subtle break */}
  <Separator variant="simple" maxWidth="md" className="mx-auto my-6" />

  <div class="text-center">
    <h3 class="text-lg font-bold text-gray-800">Section Two: Details</h3>
    <p class="text-sm text-gray-600 mt-2">
      This is the second block of content. It follows the separator, 
      providing further details.
    </p>
  </div>