Tabs Examples
#
Default TabsUse the default tabs component to show different content by clicking on the tabs items in the list.
Profile Information
John Doe
john.doe@example.com
Member since January 2024
<Tabs>
<TabListContent>
<Tab Index="0">Profile</Tab>
<Tab Index="1">Dashboard</Tab>
<Tab Index="2">Settings</Tab>
<Tab Index="3" Disabled>Contacts</Tab>
</TabListContent>
<TabPanelsContent>
<TabPanel Index="0">
<div class="space-y-4">
<h3 class="text-lg font-medium">Profile Information</h3>
...
</div>
</TabPanel>
<TabPanel Index="1">
<div class="space-y-4">
<h3 class="text-lg font-medium">Dashboard Overview</h3>
...
</div>
</TabPanel>
<TabPanel Index="2">
<div class="space-y-4">
<h3 class="text-lg font-medium">Settings</h3>
...
</div>
</TabPanel>
<TabPanel Index="3">
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<div class="flex items-center justify-center h-32">
<p class="text-gray-500 dark:text-gray-400">This tab is disabled</p>
</div>
</div>
</TabPanel>
</TabPanelsContent>
</Tabs>
#
Tabs with UnderlineUse the underline tabs variant to show different content with an underline style.
Profile Information
Administrator
Active
<Tabs Variant="TabVariant.Underline">
<TabListContent>
<Tab Index="0">Profile</Tab>
<Tab Index="1">Dashboard</Tab>
<Tab Index="2">Settings</Tab>
</TabListContent>
<TabPanelsContent>
<TabPanel Index="0">
<div class="space-y-4">
<h3 class="text-lg font-medium">Profile Information</h3>
...
</div>
</TabPanel>
<TabPanel Index="1">
<div class="space-y-4">
<h3 class="text-lg font-medium">Recent Activity</h3>
...
</div>
</TabPanel>
<TabPanel Index="2">
<div class="space-y-4">
<h3 class="text-lg font-medium">Preferences</h3>
<div class="space-y-3">
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<span class="font-medium">Language</span>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">English (US)</p>
</div>
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
<span class="font-medium">Time Zone</span>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">UTC-8</p>
</div>
</div>
</div>
</TabPanel>
</TabPanelsContent>
</Tabs>
#
Pills TabsUse the pills tabs variant to show different content with a pill style design.
Account Details
Premium
Annual Plan
<Tabs Variant="TabVariant.Pills">
<TabListContent>
<Tab Index="0">Profile</Tab>
<Tab Index="1">Dashboard</Tab>
<Tab Index="2">Settings</Tab>
</TabListContent>
<TabPanelsContent>
<TabPanel Index="0">
<div class="space-y-4">
<h3 class="text-lg font-medium">Account Details</h3>
...
</div>
</TabPanel>
<TabPanel Index="1">
<div class="space-y-4">
<h3 class="text-lg font-medium">Usage Statistics</h3>
...
</div>
</TabPanel>
<TabPanel Index="2">
<div class="space-y-4">
<h3 class="text-lg font-medium">Security Settings</h3>
...
</div>
</TabPanel>
</TabPanelsContent>
</Tabs>
#
Full Width TabsUse the full width tabs variant to span the entire width of the container.
Team Profile
15
4
3
<Tabs Variant="TabVariant.FullWidth">
<TabListContent>
<Tab Index="0">Profile</Tab>
<Tab Index="1">Dashboard</Tab>
<Tab Index="2">Settings</Tab>
</TabListContent>
<TabPanelsContent>
<TabPanel Index="0">
<div class="space-y-4">
<h3 class="text-lg font-medium">Team Profile</h3>
...
</div>
</TabPanel>
<TabPanel Index="1">
<div class="space-y-4">
<h3 class="text-lg font-medium">Performance Metrics</h3>
...
</div>
</TabPanel>
<TabPanel Index="2">
<div class="space-y-4">
<h3 class="text-lg font-medium">System Configuration</h3>
...
</div>
</TabPanel>
</TabPanelsContent>
</Tabs>
#
Tabs with IconsUse these tabs with icons examples to show additional visual elements alongside the tab items.
Personal Information
San Francisco, CA
PST (UTC-8)
Full-stack developer with a passion for building user-friendly applications.
<Tabs>
<TabListContent>
<Tab Index="0" Icon="@(new UserIcon())">Profile</Tab>
<Tab Index="1" Icon="@(new ChartIcon())">Dashboard</Tab>
<Tab Index="2" Icon="@(new GearIcon())">Settings</Tab>
</TabListContent>
<TabPanelsContent>
<TabPanel Index="0">
<div class="space-y-4">
<h3 class="text-lg font-medium">Personal Information</h3>
...
</div>
</TabPanel>
<TabPanel Index="1">
<div class="space-y-4">
<h3 class="text-lg font-medium">Activity Summary</h3>
...
</div>
</TabPanel>
<TabPanel Index="2">
<div class="space-y-4">
<h3 class="text-lg font-medium">Application Settings</h3>
...
</div>
</TabPanel>
</TabPanelsContent>
</Tabs>