Components
pinion-ui

Theme

Tune

Lang

Tabs

Tab-switched content. Changed to nested syntax in v0.4.0 (naturally pass Blade slots without XSS). Nest <x-tab name="..." label="...">content</x-tab> inside <x-tabs>. variant: underline (default) / boxed / pill. size: sm / md / lg. Set default active name (first tab if omitted). Alpine x-data tracks client-side active state.

1. Minimal setup — place <x-tab> inside <x-tabs>. name is the activeTab value, label is the button text, slot is the panel content

The overview panel.

The specs panel.

The reviews panel.

<x-tabs>
    <x-tab name="overview" label="Overview"><p class="text-sm">The overview panel.</p></x-tab>
    <x-tab name="specs" label="Specs"><p class="text-sm">The specs panel.</p></x-tab>
    <x-tab name="reviews" label="Reviews"><p class="text-sm">The reviews panel.</p></x-tab>
</x-tabs>

<div x-data="{ activeTab: null }" x-init="if (!activeTab) { activeTab = $el.querySelector('[data-pn-tab]')?.dataset.pnTab ?? null }" class="w-full flex flex-wrap items-stretch gap-0 after:content-[&quot;&quot;] after:order-0 after:flex-1 after:border-b after:border-base-300 after:self-stretch" role="tablist">
<button type="button" role="tab" data-pn-tab="overview" x-bind:aria-selected="activeTab === 'overview'" x-bind:class="activeTab === 'overview' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'overview'">Overview</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'overview'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            The overview panel.
        </p>
</div><button type="button" role="tab" data-pn-tab="specs" x-bind:aria-selected="activeTab === 'specs'" x-bind:class="activeTab === 'specs' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'specs'">Specs</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'specs'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            The specs panel.
        </p>
</div><button type="button" role="tab" data-pn-tab="reviews" x-bind:aria-selected="activeTab === 'reviews'" x-bind:class="activeTab === 'reviews' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'reviews'">Reviews</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'reviews'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            The reviews panel.
        </p>
</div>
</div>

variant=boxed (active = filled primary chip)

Account settings.

Security settings.

Billing settings.

<x-tabs variant="boxed">
    <x-tab name="a" label="Account"><p class="text-sm">Account settings.</p></x-tab>
    <x-tab name="b" label="Security"><p class="text-sm">Security settings.</p></x-tab>
    <x-tab name="c" label="Billing"><p class="text-sm">Billing settings.</p></x-tab>
</x-tabs>

<div x-data="{ activeTab: null }" x-init="if (!activeTab) { activeTab = $el.querySelector('[data-pn-tab]')?.dataset.pnTab ?? null }" class="w-full flex flex-wrap items-stretch gap-1" role="tablist">
<button type="button" role="tab" data-pn-tab="a" x-bind:aria-selected="activeTab === 'a'" x-bind:class="activeTab === 'a' ? 'bg-primary text-primary-content rounded-[var(--radius-field)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-field)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'a'">Account</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'a'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Account settings.
        </p>
</div><button type="button" role="tab" data-pn-tab="b" x-bind:aria-selected="activeTab === 'b'" x-bind:class="activeTab === 'b' ? 'bg-primary text-primary-content rounded-[var(--radius-field)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-field)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'b'">Security</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'b'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Security settings.
        </p>
</div><button type="button" role="tab" data-pn-tab="c" x-bind:aria-selected="activeTab === 'c'" x-bind:class="activeTab === 'c' ? 'bg-primary text-primary-content rounded-[var(--radius-field)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-field)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'c'">Billing</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'c'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Billing settings.
        </p>
</div>
</div>

variant=pill

Everything.

Active only.

Done only.

<x-tabs variant="pill">
    <x-tab name="all" label="All"><p class="text-sm">Everything.</p></x-tab>
    <x-tab name="active" label="Active"><p class="text-sm">Active only.</p></x-tab>
    <x-tab name="done" label="Done"><p class="text-sm">Done only.</p></x-tab>
</x-tabs>

<div x-data="{ activeTab: null }" x-init="if (!activeTab) { activeTab = $el.querySelector('[data-pn-tab]')?.dataset.pnTab ?? null }" class="w-full flex flex-wrap items-stretch gap-1" role="tablist">
<button type="button" role="tab" data-pn-tab="all" x-bind:aria-selected="activeTab === 'all'" x-bind:class="activeTab === 'all' ? 'bg-base-200 text-base-content rounded-[var(--radius-selector)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-selector)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'all'">All</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'all'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Everything.
        </p>
</div><button type="button" role="tab" data-pn-tab="active" x-bind:aria-selected="activeTab === 'active'" x-bind:class="activeTab === 'active' ? 'bg-base-200 text-base-content rounded-[var(--radius-selector)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-selector)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'active'">Active</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'active'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Active only.
        </p>
</div><button type="button" role="tab" data-pn-tab="done" x-bind:aria-selected="activeTab === 'done'" x-bind:class="activeTab === 'done' ? 'bg-base-200 text-base-content rounded-[var(--radius-selector)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-selector)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'done'">Done</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'done'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Done only.
        </p>
</div>
</div>

size — sm / md (default) / lg

size=sm

Two panel.

size=md (default)

Two panel.

size=lg

Two panel.

<x-tabs size="sm">
    <x-tab name="sm_one" label="One"><p class="text-sm">size=sm</p></x-tab>
    <x-tab name="sm_two" label="Two"><p class="text-sm">Two panel.</p></x-tab>
</x-tabs>
<x-tabs size="md">
    <x-tab name="md_one" label="One"><p class="text-sm">size=md (default)</p></x-tab>
    <x-tab name="md_two" label="Two"><p class="text-sm">Two panel.</p></x-tab>
</x-tabs>
<x-tabs size="lg">
    <x-tab name="lg_one" label="One"><p class="text-sm">size=lg</p></x-tab>
    <x-tab name="lg_two" label="Two"><p class="text-sm">Two panel.</p></x-tab>
</x-tabs>

<div x-data="{ activeTab: null }" x-init="if (!activeTab) { activeTab = $el.querySelector('[data-pn-tab]')?.dataset.pnTab ?? null }" class="w-full flex flex-wrap items-stretch gap-0 after:content-[&quot;&quot;] after:order-0 after:flex-1 after:border-b after:border-base-300 after:self-stretch" role="tablist">
<button type="button" role="tab" data-pn-tab="sm_one" x-bind:aria-selected="activeTab === 'sm_one'" x-bind:class="activeTab === 'sm_one' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]" x-on:click="activeTab = 'sm_one'">One</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'sm_one'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            size=sm
        </p>
</div><button type="button" role="tab" data-pn-tab="sm_two" x-bind:aria-selected="activeTab === 'sm_two'" x-bind:class="activeTab === 'sm_two' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]" x-on:click="activeTab = 'sm_two'">Two</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'sm_two'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Two panel.
        </p>
</div>
</div>
<div x-data="{ activeTab: null }" x-init="if (!activeTab) { activeTab = $el.querySelector('[data-pn-tab]')?.dataset.pnTab ?? null }" class="w-full flex flex-wrap items-stretch gap-0 after:content-[&quot;&quot;] after:order-0 after:flex-1 after:border-b after:border-base-300 after:self-stretch" role="tablist">
<button type="button" role="tab" data-pn-tab="md_one" x-bind:aria-selected="activeTab === 'md_one'" x-bind:class="activeTab === 'md_one' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'md_one'">One</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'md_one'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            size=md (default)
        </p>
</div><button type="button" role="tab" data-pn-tab="md_two" x-bind:aria-selected="activeTab === 'md_two'" x-bind:class="activeTab === 'md_two' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'md_two'">Two</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'md_two'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Two panel.
        </p>
</div>
</div>
<div x-data="{ activeTab: null }" x-init="if (!activeTab) { activeTab = $el.querySelector('[data-pn-tab]')?.dataset.pnTab ?? null }" class="w-full flex flex-wrap items-stretch gap-0 after:content-[&quot;&quot;] after:order-0 after:flex-1 after:border-b after:border-base-300 after:self-stretch" role="tablist">
<button type="button" role="tab" data-pn-tab="lg_one" x-bind:aria-selected="activeTab === 'lg_one'" x-bind:class="activeTab === 'lg_one' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)]" x-on:click="activeTab = 'lg_one'">One</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'lg_one'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            size=lg
        </p>
</div><button type="button" role="tab" data-pn-tab="lg_two" x-bind:aria-selected="activeTab === 'lg_two'" x-bind:class="activeTab === 'lg_two' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)]" x-on:click="activeTab = 'lg_two'">Two</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'lg_two'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Two panel.
        </p>
</div>
</div>

default = "specs" — sets the initially active tab

Not the default tab.

Opened first because default="specs".

Reviews.

<x-tabs default="specs">
    <x-tab name="overview" label="Overview"><p class="text-sm">Not the default tab.</p></x-tab>
    <x-tab name="specs" label="Specs"><p class="text-sm">Opened first because default="specs".</p></x-tab>
    <x-tab name="reviews" label="Reviews"><p class="text-sm">Reviews.</p></x-tab>
</x-tabs>

<div x-data="{ activeTab: 'specs' }" x-init="if (!activeTab) { activeTab = $el.querySelector('[data-pn-tab]')?.dataset.pnTab ?? null }" class="w-full flex flex-wrap items-stretch gap-0 after:content-[&quot;&quot;] after:order-0 after:flex-1 after:border-b after:border-base-300 after:self-stretch" role="tablist">
<button type="button" role="tab" data-pn-tab="overview" x-bind:aria-selected="activeTab === 'overview'" x-bind:class="activeTab === 'overview' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'overview'">Overview</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'overview'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Not the default tab.
        </p>
</div><button type="button" role="tab" data-pn-tab="specs" x-bind:aria-selected="activeTab === 'specs'" x-bind:class="activeTab === 'specs' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'specs'">Specs</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'specs'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Opened first because default="specs".
        </p>
</div><button type="button" role="tab" data-pn-tab="reviews" x-bind:aria-selected="activeTab === 'reviews'" x-bind:class="activeTab === 'reviews' ? 'text-primary border-b-2 border-primary' : 'text-base-content/60 hover:text-base-content border-b-2 border-transparent'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'reviews'">Reviews</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'reviews'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Reviews.
        </p>
</div>
</div>

Adding an icon to a tab — pass pre-rendered markup (HTML / pinion-icons, etc.) to the icon prop

The home panel.

The profile panel.

<x-tabs variant="boxed">
    <x-tab name="home" label="Home" icon="<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' class='w-4 h-4'><path d='M3 11l9-7 9 7M5 10v10h14V10' stroke-linejoin='round' stroke-linecap='round'/></svg>">
        <p class="text-sm">The home panel.</p>
    </x-tab>
    <x-tab name="profile" label="Profile" icon="<svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' class='w-4 h-4'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-7 8-7s8 3 8 7' stroke-linejoin='round' stroke-linecap='round'/></svg>">
        <p class="text-sm">The profile panel.</p>
    </x-tab>
</x-tabs>

<div x-data="{ activeTab: null }" x-init="if (!activeTab) { activeTab = $el.querySelector('[data-pn-tab]')?.dataset.pnTab ?? null }" class="w-full flex flex-wrap items-stretch gap-1" role="tablist">
<button type="button" role="tab" data-pn-tab="home" x-bind:aria-selected="activeTab === 'home'" x-bind:class="activeTab === 'home' ? 'bg-primary text-primary-content rounded-[var(--radius-field)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-field)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'home'"><span class="inline-flex items-center gap-xs"><svg viewbox='0 0 24 24' fill='none' stroke='currentcolor' stroke-width='1.5' class='w-4 h-4'>
<path d='M3 11l9-7 9 7M5 10v10h14V10' stroke-linejoin='round' stroke-linecap='round'></path></svg>Home</span></button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'home'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            The home panel.
        </p>
</div><button type="button" role="tab" data-pn-tab="profile" x-bind:aria-selected="activeTab === 'profile'" x-bind:class="activeTab === 'profile' ? 'bg-primary text-primary-content rounded-[var(--radius-field)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-field)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]" x-on:click="activeTab = 'profile'"><span class="inline-flex items-center gap-xs"><svg viewbox='0 0 24 24' fill='none' stroke='currentcolor' stroke-width='1.5' class='w-4 h-4'>
<circle cx='12' cy='8' r='4'></circle>
<path d='M4 21c0-4 4-7 8-7s8 3 8 7' stroke-linejoin='round' stroke-linecap='round'></path></svg>Profile</span></button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 'profile'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            The profile panel.
        </p>
</div>
</div>

Many tabs — horizontal overflow wraps via flex-wrap

Inbox

Drafts

Sent

Spam

Trash

Archive

Important

<x-tabs variant="pill" size="sm">
    <x-tab name="t1" label="Inbox"><p class="text-sm">Inbox</p></x-tab>
    <x-tab name="t2" label="Drafts"><p class="text-sm">Drafts</p></x-tab>
    <x-tab name="t3" label="Sent"><p class="text-sm">Sent</p></x-tab>
    <x-tab name="t4" label="Spam"><p class="text-sm">Spam</p></x-tab>
    <x-tab name="t5" label="Trash"><p class="text-sm">Trash</p></x-tab>
    <x-tab name="t6" label="Archive"><p class="text-sm">Archive</p></x-tab>
    <x-tab name="t7" label="Important"><p class="text-sm">Important</p></x-tab>
</x-tabs>

<div x-data="{ activeTab: null }" x-init="if (!activeTab) { activeTab = $el.querySelector('[data-pn-tab]')?.dataset.pnTab ?? null }" class="w-full flex flex-wrap items-stretch gap-1" role="tablist">
<button type="button" role="tab" data-pn-tab="t1" x-bind:aria-selected="activeTab === 't1'" x-bind:class="activeTab === 't1' ? 'bg-base-200 text-base-content rounded-[var(--radius-selector)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-selector)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]" x-on:click="activeTab = 't1'">Inbox</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 't1'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Inbox
        </p>
</div><button type="button" role="tab" data-pn-tab="t2" x-bind:aria-selected="activeTab === 't2'" x-bind:class="activeTab === 't2' ? 'bg-base-200 text-base-content rounded-[var(--radius-selector)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-selector)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]" x-on:click="activeTab = 't2'">Drafts</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 't2'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Drafts
        </p>
</div><button type="button" role="tab" data-pn-tab="t3" x-bind:aria-selected="activeTab === 't3'" x-bind:class="activeTab === 't3' ? 'bg-base-200 text-base-content rounded-[var(--radius-selector)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-selector)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]" x-on:click="activeTab = 't3'">Sent</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 't3'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Sent
        </p>
</div><button type="button" role="tab" data-pn-tab="t4" x-bind:aria-selected="activeTab === 't4'" x-bind:class="activeTab === 't4' ? 'bg-base-200 text-base-content rounded-[var(--radius-selector)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-selector)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]" x-on:click="activeTab = 't4'">Spam</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 't4'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Spam
        </p>
</div><button type="button" role="tab" data-pn-tab="t5" x-bind:aria-selected="activeTab === 't5'" x-bind:class="activeTab === 't5' ? 'bg-base-200 text-base-content rounded-[var(--radius-selector)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-selector)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]" x-on:click="activeTab = 't5'">Trash</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 't5'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Trash
        </p>
</div><button type="button" role="tab" data-pn-tab="t6" x-bind:aria-selected="activeTab === 't6'" x-bind:class="activeTab === 't6' ? 'bg-base-200 text-base-content rounded-[var(--radius-selector)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-selector)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]" x-on:click="activeTab = 't6'">Archive</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 't6'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Archive
        </p>
</div><button type="button" role="tab" data-pn-tab="t7" x-bind:aria-selected="activeTab === 't7'" x-bind:class="activeTab === 't7' ? 'bg-base-200 text-base-content rounded-[var(--radius-selector)]' : 'text-base-content/60 hover:text-base-content hover:bg-base-200/50 rounded-[var(--radius-selector)]'" class="order-0 relative inline-flex items-center font-medium transition-colors cursor-pointer whitespace-nowrap h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]" x-on:click="activeTab = 't7'">Important</button>
<div role="tabpanel" class="order-1 basis-full mt-sm" x-show="activeTab === 't7'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-cloak="">
<p class="text-sm">
            Important
        </p>
</div>
</div>