#Separator Component

#Introduction

The separator component provides a clean and accessible way to visually separate content sections. It supports both horizontal and vertical orientations, optional labels, and follows accessibility best practices. Perfect for dividing form sections, content areas, or creating visual breaks in your interface.

#Installation

Use the fluxtor artisan command to install the separator component easily:

php artisan fluxtor:install separator

#Basic Usage

<div class="flex gap-4">
    <x-ui.card size="md" class="mx-auto">
        <x-ui.heading class="flex items-center justify-between mb-4" level="h3" size="sm">
            <span>Welcome to Fluxtor.</span>
            <a href="https://fluxtor.dev">
                <x-ui.icon name="arrow-up-right" class="text-gray-800 dark:text-white size-4" />
            </a>
        </x-ui.heading>
        <p>
            Powered by the TALL stack, our components offer speed, elegance,
            and accessibility for modern web development. 
        </p>
    </x-ui.card>
    <x-ui.separator class="my-2" vertical />
    <x-ui.card size="md" class="mx-auto">
        <x-ui.heading class="flex items-center justify-between mb-4" level="h3" size="sm">
            <span>Welcome to Converge.</span>
            <a href="https://convergeghp.com">
                <x-ui.icon name="arrow-up-right" class="text-gray-800 dark:text-white size-4" />
            </a>
        </x-ui.heading>
        <p>
            Advanced documentation management framework for Laravel artisans  
        </p>
    </x-ui.card>
</div>

#Orientations

#Horizontal Separator (Default)

The default orientation creates a horizontal line to separate content vertically.

#Vertical Separator

Use vertical orientation to separate content horizontally.

<div class="flex gap-4">
        <x-ui.card size="md" class="mx-auto flex-1">
            <x-ui.heading class="flex items-center justify-between mb-4" level="h3" size="sm">
                <span>Welcome to Fluxtor.</span>
                <a href="https://fluxtor.dev">
                    <x-ui.icon name="arrow-up-right" class="text-gray-800 dark:text-white size-4" />
                </a>
            </x-ui.heading>
            <p>
                Powered by the TALL stack, our components offer speed, elegance,
                and accessibility for modern web development. 
            </p>
        </x-ui.card>
        <x-ui.separator class="my-2" vertical />
        <x-ui.card size="md" class="mx-auto flex-1">
            <x-ui.heading class="flex items-center justify-between mb-4" level="h3" size="sm">
                <span>Welcome to Converge.</span>
                <a href="https://convergeghp.com">
                    <x-ui.icon name="arrow-up-right" class="text-gray-800 dark:text-white size-4" />
                </a>
            </x-ui.heading>
            <p>
                Advanced documentation management framework for Laravel artisans  
            </p>
        </x-ui.card>
    </div>

for spaces always use gap instead of space-* utilities

#Labeled Separators

Add labels to provide context for the separation.

#Horizontal with Label

<x-ui.separator label="OR" />

#Vertical with Label

<x-ui.separator vertical label="OR" />

#Component Props

#Examples