Theme:
Tabs
Tabs organize content into switchable panels. CSS handles styling; use Alpine.js for content switching.
Basic Tabs
<div class="dui-tabs">
<button class="dui-tab dui-tab-active">Overview</button>
<button class="dui-tab">Features</button>
<button class="dui-tab">Pricing</button>
</div>
Boxed Tabs
<div class="dui-tabs dui-tabs-boxed">
<button class="dui-tab dui-tab-active">Month</button>
<button class="dui-tab">Quarter</button>
<button class="dui-tab">Year</button>
</div>
Lifted Tabs
<div class="dui-tabs dui-tabs-lifted">
<button class="dui-tab dui-tab-active">Details</button>
<button class="dui-tab">Attachments</button>
</div>
Sizes
<div class="dui-tabs dui-tabs-sm">...</div>
<div class="dui-tabs">...</div>
<div class="dui-tabs dui-tabs-lg">...</div>
With Alpine.js Content Switching
<div x-data="{ activeTab: 'overview' }">
<div class="dui-tabs">
<button @click="activeTab = 'overview'"
:class="{ 'dui-tab-active': activeTab === 'overview' }"
class="dui-tab">Overview</button>
<button @click="activeTab = 'features'"
:class="{ 'dui-tab-active': activeTab === 'features' }"
class="dui-tab">Features</button>
</div>
<div x-show="activeTab === 'overview'">Overview content</div>
<div x-show="activeTab === 'features'">Features content</div>
</div>