Basic Usage

<x-divider />

Props

• orientation - string (default: 'horizontal', alternative: 'vertical')
• variant - string (default: 'solid', alternatives: 'dashed', 'dotted')
• color - string|null (default: null - zinc, alternatives: 'accent' or any Tailwind color)
• text - string|null (optional text to display in the middle of the divider)
• size - string (default: 'sm', alternatives: 'md', 'lg', 'xl')
• width - string|null (custom width, e.g., '50%', '200px')

Examples

<!-- Basic -->
<x-divider />

<!-- Variants -->
<x-divider variant="solid" />
<x-divider variant="dashed" />
<x-divider variant="dotted" />

<!-- Sizes -->
<x-divider size="sm" />
<x-divider size="md" />
<x-divider size="lg" />
<x-divider size="xl" />

<!-- With Text -->
<x-divider text="OR" />
<x-divider text="Continue with" />

<!-- Colors -->
<x-divider color="accent" />
<x-divider color="blue" />
<x-divider color="red" />

<!-- Vertical -->
<div class="flex items-center gap-4">
    <div>Left</div>
    <x-divider orientation="vertical" />
    <div>Right</div>
</div>

<!-- Custom Width -->
<x-divider width="50%" />
<x-divider width="200px" />
<x-divider width="75%" />

Use Cases

• Separating content sections
• Dividing form fields
• Creating visual breaks in lists
• Vertical dividers in horizontal layouts
• Text dividers for "OR" or "Continue with" scenarios