Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Usage
Basic
Account
Password
Settings
<div class="w-full max-w-md mx-auto"> <twig:ui:Tabs> <twig:ui:Tabs:List> <twig:ui:Tabs:Tab>Account</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Password</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Settings</twig:ui:Tabs:Tab> </twig:ui:Tabs:List> <twig:ui:Tabs:Panels> <twig:ui:Tabs:Panel> <twig:ui:Card class="h-48 bg-blue-50 border-blue-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-blue-800">Account</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-green-50 border-green-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-green-800">Password</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-purple-50 border-purple-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-purple-800">Settings</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> </twig:ui:Tabs:Panels> </twig:ui:Tabs> </div>
Manual Activation
Overview
Use Space/Enter to activate tabs
Details
Summary
<div class="w-full max-w-md mx-auto"> <twig:ui:Tabs data-activation="manual"> <twig:ui:Tabs:List> <twig:ui:Tabs:Tab>Overview</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Details</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Summary</twig:ui:Tabs:Tab> </twig:ui:Tabs:List> <twig:ui:Tabs:Panels> <twig:ui:Tabs:Panel> <twig:ui:Card class="h-48 bg-orange-50 border-orange-200"> <div class="flex flex-col items-center justify-center h-full text-center space-y-2"> <h3 class="text-xl font-semibold text-orange-800">Overview</h3> <p class="text-sm text-orange-600">Use Space/Enter to activate tabs</p> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-teal-50 border-teal-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-teal-800">Details</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-rose-50 border-rose-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-rose-800">Summary</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> </twig:ui:Tabs:Panels> </twig:ui:Tabs> </div>
Default Second Panel
First
Second
This panel is active by default
Third
<div class="w-full max-w-md mx-auto"> <twig:ui:Tabs> <twig:ui:Tabs:List> <twig:ui:Tabs:Tab>First</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Second</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Third</twig:ui:Tabs:Tab> </twig:ui:Tabs:List> <twig:ui:Tabs:Panels> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-gray-50 border-gray-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-gray-800">First</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel> <twig:ui:Card class="h-48 bg-indigo-50 border-indigo-200"> <div class="flex flex-col items-center justify-center h-full text-center space-y-2"> <h3 class="text-xl font-semibold text-indigo-800">Second</h3> <p class="text-sm text-indigo-600">This panel is active by default</p> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-amber-50 border-amber-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-amber-800">Third</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> </twig:ui:Tabs:Panels> </twig:ui:Tabs> </div>
External Controls
Home
Controlled by external buttons
Products
Contact
<div class="w-full max-w-md mx-auto space-y-4"> <div class="flex space-x-2 justify-center"> <twig:ui:Button variant="outline" onclick="document.getElementById('external-tabs').setActiveTab(0)" > Home </twig:ui:Button> <twig:ui:Button variant="outline" onclick="document.getElementById('external-tabs').setActiveTab(1)" > Products </twig:ui:Button> <twig:ui:Button variant="outline" onclick="document.getElementById('external-tabs').setActiveTab(2)" > Contact </twig:ui:Button> </div> <twig:ui:Tabs id="external-tabs"> <twig:ui:Tabs:List> <twig:ui:Tabs:Tab>Home</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Products</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Contact</twig:ui:Tabs:Tab> </twig:ui:Tabs:List> <twig:ui:Tabs:Panels> <twig:ui:Tabs:Panel> <twig:ui:Card class="h-48 bg-cyan-50 border-cyan-200"> <div class="flex flex-col items-center justify-center h-full text-center space-y-2"> <h3 class="text-xl font-semibold text-cyan-800">Home</h3> <p class="text-sm text-cyan-600">Controlled by external buttons</p> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-emerald-50 border-emerald-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-emerald-800">Products</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-violet-50 border-violet-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-violet-800">Contact</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> </twig:ui:Tabs:Panels> </twig:ui:Tabs> </div>
Vertical
General
Appearance
Privacy
Advanced
<div class="w-full max-w-2xl mx-auto"> <twig:ui:Tabs orientation="vertical"> <twig:ui:Tabs:List> <twig:ui:Tabs:Tab>General</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Appearance</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Privacy</twig:ui:Tabs:Tab> <twig:ui:Tabs:Tab>Advanced</twig:ui:Tabs:Tab> </twig:ui:Tabs:List> <twig:ui:Tabs:Panels> <twig:ui:Tabs:Panel> <twig:ui:Card class="h-48 bg-blue-50 border-blue-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-blue-800">General</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-green-50 border-green-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-green-800">Appearance</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-purple-50 border-purple-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-purple-800">Privacy</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> <twig:ui:Tabs:Panel hidden> <twig:ui:Card class="h-48 bg-orange-50 border-orange-200"> <div class="flex items-center justify-center h-full"> <h3 class="text-xl font-semibold text-orange-800">Advanced</h3> </div> </twig:ui:Card> </twig:ui:Tabs:Panel> </twig:ui:Tabs:Panels> </twig:ui:Tabs> </div>