Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Separator

Visually or semantically separates content.

Usage

Slate UI

An open-source UI component library.

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

Horizontal

Account

Manage your profile and preferences.

Billing

Invoices, plans, and payment methods.

example.blade.php 
<div class="w-full max-w-sm space-y-4">
    <div class="space-y-1">
        <p class="text-sm font-medium">Account</p>
        <p class="text-sm text-muted-foreground">Manage your profile and preferences.</p>
    </div>
    <x-slate::separator />
    <div class="space-y-1">
        <p class="text-sm font-medium">Billing</p>
        <p class="text-sm text-muted-foreground">Invoices, plans, and payment methods.</p>
    </div>
</div>

Vertical

Vertical separators need a definite height from the parent.

Blog Docs Source
example.blade.php 
<div class="flex h-5 items-center gap-4 text-sm">
    <span>Blog</span>
    <x-slate::separator orientation="vertical" />
    <span>Docs</span>
    <x-slate::separator orientation="vertical" />
    <span>Source</span>
</div>

Semantic separator

Set decorative="false" when the divider conveys structure to assistive tech.

Section one

Section two

example.blade.php 
<div class="w-full max-w-sm space-y-4">
    <p class="text-sm">Section one</p>
    <x-slate::separator :decorative="false" />
    <p class="text-sm">Section two</p>
</div>

API Reference
Prop Type Default Description
orientation horizontal | vertical horizontal Divider axis
decorative bool true When true, hidden from the accessibility tree
as string div Root HTML element
Last updated .