Components
Tabs
A set of layered sections of content displayed one panel at a time.
php artisan blatui:add tabs
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
<x-ui.tabs value="account" class="w-full max-w-md">
<x-ui.tabs-list class="grid w-full grid-cols-2">
<x-ui.tabs-trigger value="account">Account</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="password">Password</x-ui.tabs-trigger>
</x-ui.tabs-list>
<x-ui.tabs-content value="account">
<x-ui.card variant="sectioned">
<x-ui.card-header>
<x-ui.card-title>Account</x-ui.card-title>
<x-ui.card-description>
Make changes to your account here. Click save when you're done.
</x-ui.card-description>
</x-ui.card-header>
<x-ui.card-content class="grid gap-3">
<div class="grid gap-1.5">
<x-ui.label for="name">Name</x-ui.label>
<x-ui.input id="name" value="Pedro Duarte" />
</div>
</x-ui.card-content>
<x-ui.card-footer>
<x-ui.button>Save changes</x-ui.button>
</x-ui.card-footer>
</x-ui.card>
</x-ui.tabs-content>
<x-ui.tabs-content value="password">
<x-ui.card variant="sectioned">
<x-ui.card-header>
<x-ui.card-title>Password</x-ui.card-title>
<x-ui.card-description>
Change your password here. After saving, you'll be logged out.
</x-ui.card-description>
</x-ui.card-header>
<x-ui.card-content class="grid gap-3">
<div class="grid gap-1.5">
<x-ui.label for="current">Current password</x-ui.label>
<x-ui.input id="current" type="password" />
</div>
</x-ui.card-content>
<x-ui.card-footer>
<x-ui.button>Save password</x-ui.button>
</x-ui.card-footer>
</x-ui.card>
</x-ui.tabs-content>
</x-ui.tabs>Disabled
Manage your account settings and preferences.
Change your password and security options.
<x-ui.tabs value="account" class="w-full max-w-md">
<x-ui.tabs-list class="grid w-full grid-cols-3">
<x-ui.tabs-trigger value="account">Account</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="password">Password</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="team" disabled>Team</x-ui.tabs-trigger>
</x-ui.tabs-list>
<x-ui.tabs-content value="account" class="text-muted-foreground text-sm">Manage your account settings and preferences.</x-ui.tabs-content>
<x-ui.tabs-content value="password" class="text-muted-foreground text-sm">Change your password and security options.</x-ui.tabs-content>
</x-ui.tabs>Line
Your store overview and key metrics at a glance.
Detailed analytics and traffic insights.
Generate and download reports.
{{-- Underline ("line") variant via `variant="underline"` on the list. --}}
<x-ui.tabs value="overview" class="w-full max-w-md">
<x-ui.tabs-list variant="underline">
<x-ui.tabs-trigger value="overview">Overview</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="analytics">Analytics</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="reports">Reports</x-ui.tabs-trigger>
</x-ui.tabs-list>
<x-ui.tabs-content value="overview" class="text-muted-foreground pt-3 text-sm">Your store overview and key metrics at a glance.</x-ui.tabs-content>
<x-ui.tabs-content value="analytics" class="text-muted-foreground pt-3 text-sm">Detailed analytics and traffic insights.</x-ui.tabs-content>
<x-ui.tabs-content value="reports" class="text-muted-foreground pt-3 text-sm">Generate and download reports.</x-ui.tabs-content>
</x-ui.tabs>Pills
Every item in your workspace.
Items currently in progress.
Items you've put away.
{{-- Pill variant via `variant="pills"` — rounded, filled active tab. --}}
<x-ui.tabs value="all" class="w-full max-w-md">
<x-ui.tabs-list variant="pills">
<x-ui.tabs-trigger value="all">All</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="active">Active</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="archived">Archived</x-ui.tabs-trigger>
</x-ui.tabs-list>
<x-ui.tabs-content value="all" class="text-muted-foreground pt-3 text-sm">Every item in your workspace.</x-ui.tabs-content>
<x-ui.tabs-content value="active" class="text-muted-foreground pt-3 text-sm">Items currently in progress.</x-ui.tabs-content>
<x-ui.tabs-content value="archived" class="text-muted-foreground pt-3 text-sm">Items you've put away.</x-ui.tabs-content>
</x-ui.tabs>Simple
Your store overview and key metrics at a glance.
Detailed analytics and traffic insights.
Generate and download reports.
<x-ui.tabs value="overview" class="w-full max-w-md">
<x-ui.tabs-list>
<x-ui.tabs-trigger value="overview">Overview</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="analytics">Analytics</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="reports">Reports</x-ui.tabs-trigger>
</x-ui.tabs-list>
<x-ui.tabs-content value="overview" class="text-muted-foreground text-sm">Your store overview and key metrics at a glance.</x-ui.tabs-content>
<x-ui.tabs-content value="analytics" class="text-muted-foreground text-sm">Detailed analytics and traffic insights.</x-ui.tabs-content>
<x-ui.tabs-content value="reports" class="text-muted-foreground text-sm">Generate and download reports.</x-ui.tabs-content>
</x-ui.tabs>Vertical
Manage your general workspace preferences.
Configure authentication and access control.
Connect third-party services and webhooks.
<x-ui.tabs value="general" orientation="vertical" class="w-full max-w-xl flex-row gap-4">
<x-ui.tabs-list class="h-auto flex-col">
<x-ui.tabs-trigger value="general" class="w-full justify-start">General</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="security" class="w-full justify-start">Security</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="integrations" class="w-full justify-start">Integrations</x-ui.tabs-trigger>
</x-ui.tabs-list>
<div class="flex-1">
<x-ui.tabs-content value="general" class="text-muted-foreground mt-0 text-sm">Manage your general workspace preferences.</x-ui.tabs-content>
<x-ui.tabs-content value="security" class="text-muted-foreground mt-0 text-sm">Configure authentication and access control.</x-ui.tabs-content>
<x-ui.tabs-content value="integrations" class="text-muted-foreground mt-0 text-sm">Connect third-party services and webhooks.</x-ui.tabs-content>
</div>
</x-ui.tabs>With Icons
Manage your profile and personal details.
Update payment methods and view invoices.
Configure preferences and notifications.
{{-- Leading icons inside the triggers. --}}
<x-ui.tabs value="account" class="w-full max-w-md">
<x-ui.tabs-list>
<x-ui.tabs-trigger value="account"><x-lucide-user /> Account</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="billing"><x-lucide-credit-card /> Billing</x-ui.tabs-trigger>
<x-ui.tabs-trigger value="settings"><x-lucide-settings /> Settings</x-ui.tabs-trigger>
</x-ui.tabs-list>
<x-ui.tabs-content value="account" class="text-muted-foreground text-sm">Manage your profile and personal details.</x-ui.tabs-content>
<x-ui.tabs-content value="billing" class="text-muted-foreground text-sm">Update payment methods and view invoices.</x-ui.tabs-content>
<x-ui.tabs-content value="settings" class="text-muted-foreground text-sm">Configure preferences and notifications.</x-ui.tabs-content>
</x-ui.tabs>API Reference
Props, slots and exposed methods for
<x-ui.tabs>.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value |
string
|
— | The value of the tab selected on load. Must match the value of one <x-ui.tabs-trigger> / <x-ui.tabs-content> pair. |
orientation |
string
|
'horizontal'
|
Layout direction. Sets the arrow-key navigation axis on the tab list and is exposed to triggers and panels.
horizontal
vertical
|
Slots
| Slot | Description |
|---|---|
default |
The tabs composition. Put triggers inside a single <x-ui.tabs-list> (each <x-ui.tabs-trigger value="…">, with optional disabled), then one <x-ui.tabs-content value="…"> per panel. Trigger and content values must match. <x-ui.tabs-list> takes a variant of segmented, underline or pills. |