Phara UI v2.x
Login

Tabs

A tab navigation component with underline, pills, and segmented variants. State is managed by Alpine.js — no Livewire required.

Underline

The default variant. A bottom border on the active tab sits flush with the tab bar's dividing line.

Account settings content.

Password settings content.

Notification preferences content.

Billing information content.

Blade 
<x-ui::tabs default="account">
    <x-slot:tabs>
        <x-ui::tab name="account">Account</x-ui::tab>
        <x-ui::tab name="password">Password</x-ui::tab>
        <x-ui::tab name="notifications">Notifications</x-ui::tab>
        <x-ui::tab name="billing">Billing</x-ui::tab>
    </x-slot:tabs>

    <x-ui::tab-panel name="account">Account content</x-ui::tab-panel>
    <x-ui::tab-panel name="password">Password content</x-ui::tab-panel>
    <x-ui::tab-panel name="notifications">Notifications content</x-ui::tab-panel>
    <x-ui::tab-panel name="billing">Billing content</x-ui::tab-panel>
</x-ui::tabs>
Pills

Rounded pill tabs that float above the content — suited for filters, category selectors, and view toggles.

All items listed here.

Active items listed here.

Draft items listed here.

Archived items listed here.

Blade 
<x-ui::tabs default="all" variant="pills">
    <x-slot:tabs>
        <x-ui::tab name="all">All</x-ui::tab>
        <x-ui::tab name="active">Active</x-ui::tab>
        <x-ui::tab name="draft">Draft</x-ui::tab>
        <x-ui::tab name="archived">Archived</x-ui::tab>
    </x-slot:tabs>

    <x-ui::tab-panel name="all">All items</x-ui::tab-panel>
    <x-ui::tab-panel name="active">Active items</x-ui::tab-panel>
    <x-ui::tab-panel name="draft">Drafts</x-ui::tab-panel>
    <x-ui::tab-panel name="archived">Archived items</x-ui::tab-panel>
</x-ui::tabs>
Segmented

An iOS-style segmented control. The active tab is elevated with a white background inside a gray track.

Daily analytics view.

Weekly analytics view.

Monthly analytics view.

Yearly analytics view.

Blade 
<x-ui::tabs default="month" variant="segmented">
    <x-slot:tabs>
        <x-ui::tab name="day">Day</x-ui::tab>
        <x-ui::tab name="week">Week</x-ui::tab>
        <x-ui::tab name="month">Month</x-ui::tab>
        <x-ui::tab name="year">Year</x-ui::tab>
    </x-slot:tabs>

    <x-ui::tab-panel name="day">Daily view</x-ui::tab-panel>
    <x-ui::tab-panel name="week">Weekly view</x-ui::tab-panel>
    <x-ui::tab-panel name="month">Monthly view</x-ui::tab-panel>
    <x-ui::tab-panel name="year">Yearly view</x-ui::tab-panel>
</x-ui::tabs>
Sizes

Use size="sm" for compact layouts like toolbars or inline filters. The default md works for most settings pages.

Overview — md

Analytics — md

Reports — md

Overview — sm

Analytics — sm

Reports — sm

Blade 
{{-- Default (md) --}}
<x-ui::tabs default="overview" size="md">
    <x-slot:tabs>
        <x-ui::tab name="overview">Overview</x-ui::tab>
        <x-ui::tab name="analytics">Analytics</x-ui::tab>
        <x-ui::tab name="reports">Reports</x-ui::tab>
    </x-slot:tabs>
    ...
</x-ui::tabs>

{{-- Small --}}
<x-ui::tabs default="overview" size="sm">
    <x-slot:tabs>
        <x-ui::tab name="overview">Overview</x-ui::tab>
        <x-ui::tab name="analytics">Analytics</x-ui::tab>
        <x-ui::tab name="reports">Reports</x-ui::tab>
    </x-slot:tabs>
    ...
</x-ui::tabs>
With Icons

Add an icon prop to any tab to display a leading Heroicon. Works across all three variants.

Profile settings.

Security settings.

Connected integrations.

Billing and plans.

Grid view.

List view.

Table view.

Blade 
{{-- Underline with icons --}}
<x-ui::tabs default="profile">
    <x-slot:tabs>
        <x-ui::tab name="profile" icon="user">Profile</x-ui::tab>
        <x-ui::tab name="security" icon="shield-check">Security</x-ui::tab>
        <x-ui::tab name="integrations" icon="puzzle-piece">Integrations</x-ui::tab>
        <x-ui::tab name="billing" icon="credit-card">Billing</x-ui::tab>
    </x-slot:tabs>
    ...
</x-ui::tabs>

{{-- Segmented with icons --}}
<x-ui::tabs default="grid" variant="segmented">
    <x-slot:tabs>
        <x-ui::tab name="grid" icon="squares-2x2">Grid</x-ui::tab>
        <x-ui::tab name="list" icon="bars-3">List</x-ui::tab>
        <x-ui::tab name="table" icon="table-cells">Table</x-ui::tab>
    </x-slot:tabs>
    ...
</x-ui::tabs>
Disabled

Add disabled to a tab to prevent selection. The tab is dimmed and pointer events are removed.

General settings.

Advanced settings.

Enterprise settings.

Grid view.

List view.

Map view.

Blade 
<x-ui::tabs default="general">
    <x-slot:tabs>
        <x-ui::tab name="general">General</x-ui::tab>
        <x-ui::tab name="advanced">Advanced</x-ui::tab>
        <x-ui::tab name="enterprise" disabled>Enterprise</x-ui::tab>
    </x-slot:tabs>

    <x-ui::tab-panel name="general">General settings</x-ui::tab-panel>
    <x-ui::tab-panel name="advanced">Advanced settings</x-ui::tab-panel>
    <x-ui::tab-panel name="enterprise">Enterprise settings</x-ui::tab-panel>
</x-ui::tabs>
With Content

A real-world settings card composing tabs with form elements, profiles, and action rows.

JD
Jane Doe

jane@example.com

Two-factor authentication

Add an extra layer of security to your account.

Email notifications

Receive updates by email.

Push notifications

Receive push alerts on mobile.

Weekly digest

A weekly summary of your activity.

Blade 
<x-ui::card>
    <x-ui::tabs default="profile" variant="underline">
        <x-slot:tabs>
            <x-ui::tab name="profile" icon="user">Profile</x-ui::tab>
            <x-ui::tab name="security" icon="shield-check">Security</x-ui::tab>
            <x-ui::tab name="notifications" icon="bell">Notifications</x-ui::tab>
        </x-slot:tabs>

        {{-- Profile tab --}}
        <x-ui::tab-panel name="profile" class="space-y-5">
            <div class="flex items-center gap-4">
                <x-ui::avatar name="Jane Doe" size="lg" />
                <div class="space-y-1">
                    <x-ui::heading level="6">Jane Doe</x-ui::heading>
                    <x-ui::text variant="muted">jane@example.com</x-ui::text>
                </div>
            </div>
            <x-ui::separator />
            <x-ui::input label="Display name" value="Jane Doe" />
            <x-ui::input label="Email address" value="jane@example.com" type="email" />
            <x-ui::button variant="primary">Save changes</x-ui::button>
        </x-ui::tab-panel>

        {{-- Security tab --}}
        <x-ui::tab-panel name="security" class="space-y-5">
            <x-ui::switch :checked="true" color="green"
                label="Two-factor authentication"
                description="Add an extra layer of security to your account." />
            <x-ui::separator />
            <x-ui::input label="Current password" type="password" />
            <x-ui::input label="New password" type="password" />
            <x-ui::button variant="primary">Update password</x-ui::button>
        </x-ui::tab-panel>

        {{-- Notifications tab --}}
        <x-ui::tab-panel name="notifications" class="space-y-5">
            <x-ui::switch :checked="true" label="Email notifications"
                description="Receive updates by email." />
            <x-ui::switch label="Push notifications"
                description="Receive push alerts on mobile." />
            <x-ui::switch :checked="true" label="Weekly digest"
                description="A weekly summary of your activity." />
        </x-ui::tab-panel>
    </x-ui::tabs>
</x-ui::card>