Components

Separator

Visually or semantically separates content.

php artisan blatui:add separator

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

<div>
    <div class="space-y-1">
        <h4 class="text-sm leading-none font-medium">Radix Primitives</h4>
        <p class="text-muted-foreground text-sm">An open-source UI component library.</p>
    </div>
    <x-ui.separator class="my-4" />
    <div class="flex h-5 items-center gap-4 text-sm">
        <div>Blog</div>
        <x-ui.separator orientation="vertical" />
        <div>Docs</div>
        <x-ui.separator orientation="vertical" />
        <div>Source</div>
    </div>
</div>

List

Profile

Billing

Settings

<div class="bg-card w-full max-w-xs rounded-lg border text-sm">
    <div class="px-4 py-3">Profile</div>
    <x-ui.separator />
    <div class="px-4 py-3">Billing</div>
    <x-ui.separator />
    <div class="px-4 py-3">Settings</div>
</div>

With Label

<div class="w-full max-w-sm">
    <div class="relative">
        <x-ui.separator />
        <span class="bg-background text-muted-foreground absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-2 text-xs uppercase">Or</span>
    </div>
</div>

API Reference

Props, slots and exposed methods for <x-ui.separator>.

Props

Prop	Type	Default	Description
`orientation`	`string`	`'horizontal'`	Direction of the divider. Horizontal draws a full-width 1px line; vertical draws a full-height 1px line (give the parent a height for it to show). `horizontal` `vertical`
`decorative`	`bool`	`true`	When true the line is purely visual and hidden from assistive tech. Set false when the divider conveys meaning, so it exposes role="separator" with the orientation.