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

Tabs

A set of layered sections of content — only one panel is visible at a time. Requires Alpine.js.

Usage

Make changes to your account here.

Change your password here.

example.blade.php 
<x-slate::tabs default-value="account" class="w-full max-w-md">
    <x-slate::tabs-list>
        <x-slate::tabs-trigger value="account">Account</x-slate::tabs-trigger>
        <x-slate::tabs-trigger value="password">Password</x-slate::tabs-trigger>
    </x-slate::tabs-list>
    <x-slate::tabs-content value="account" class="space-y-3 pt-3">
        <p class="text-sm text-muted-foreground">Make changes to your account here.</p>
        <x-slate::input placeholder="Name" />
    </x-slate::tabs-content>
    <x-slate::tabs-content value="password" class="space-y-3 pt-3">
        <p class="text-sm text-muted-foreground">Change your password here.</p>
        <x-slate::input type="password" placeholder="New password" />
    </x-slate::tabs-content>
</x-slate::tabs>

Composition
code 
Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent

Line variant
Project overview and recent activity.
Traffic and conversion metrics.
Downloadable weekly reports.
example.blade.php 
<x-slate::tabs default-value="overview" class="w-full max-w-md">
    <x-slate::tabs-list variant="line">
        <x-slate::tabs-trigger value="overview">Overview</x-slate::tabs-trigger>
        <x-slate::tabs-trigger value="analytics">Analytics</x-slate::tabs-trigger>
        <x-slate::tabs-trigger value="reports">Reports</x-slate::tabs-trigger>
    </x-slate::tabs-list>
    <x-slate::tabs-content value="overview" class="pt-4 text-sm text-muted-foreground">
        Project overview and recent activity.
    </x-slate::tabs-content>
    <x-slate::tabs-content value="analytics" class="pt-4 text-sm text-muted-foreground">
        Traffic and conversion metrics.
    </x-slate::tabs-content>
    <x-slate::tabs-content value="reports" class="pt-4 text-sm text-muted-foreground">
        Downloadable weekly reports.
    </x-slate::tabs-content>
</x-slate::tabs>

Vertical
Workspace name, timezone, and locale.
Password, sessions, and 2FA settings.
Plan, invoices, and payment methods.
example.blade.php 
<x-slate::tabs default-value="general" orientation="vertical" class="w-full max-w-lg">
    <x-slate::tabs-list>
        <x-slate::tabs-trigger value="general">General</x-slate::tabs-trigger>
        <x-slate::tabs-trigger value="security">Security</x-slate::tabs-trigger>
        <x-slate::tabs-trigger value="billing">Billing</x-slate::tabs-trigger>
    </x-slate::tabs-list>
    <x-slate::tabs-content value="general" class="rounded-lg border p-4 text-sm">
        Workspace name, timezone, and locale.
    </x-slate::tabs-content>
    <x-slate::tabs-content value="security" class="rounded-lg border p-4 text-sm">
        Password, sessions, and 2FA settings.
    </x-slate::tabs-content>
    <x-slate::tabs-content value="billing" class="rounded-lg border p-4 text-sm">
        Plan, invoices, and payment methods.
    </x-slate::tabs-content>
</x-slate::tabs>

API Reference

Tabs
Prop Type Default Description
defaultValue string — Initially selected tab value
value string — Alias for initial value
orientation horizontal | vertical horizontal Layout axis
as string div Root HTML element

TabsList
Prop Type Default Description
variant default | line default Visual style

TabsTrigger / TabsContent
Prop Type Default Description
value string — Tab identity (must match between trigger and content)

Notes
  • Consumers need Alpine.js (Livewire includes it)
  • Active state is tracked with Alpine active on the root
Last updated .