Separator

x-separator

A thin divider for separating content. Horizontal by default, vertical on demand, or with a centered label.

php artisan components:add separator

Examples

Horizontal, vertical & labeled

A thin divider — plain, vertical, or with a centered label.

<div class="flex w-full justify-center">
    <div class="w-full max-w-md">
        <p class="text-sm text-foreground/70">Above the line</p>
        <x-components.separator class="my-4" />
        <div class="flex items-center text-sm text-foreground/70">
            <span>Profile</span>
            <x-components.separator vertical class="h-4" />
            <span>Settings</span>
            <x-components.separator vertical class="h-4" />
            <span>Logout</span>
        </div>
        <x-components.separator label="OR" class="my-4" />
        <p class="text-sm text-foreground/70">Below the labeled divider</p>
    </div>
</div>

Props

Prop	Type	Default	Description
`vertical`	boolean	`false`	Render a vertical divider instead of horizontal.
`label`	text	`—`	Optional centered text splitting the horizontal line.