Tabs Examples

Default Tabs #

Use 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 Underline #

Use 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 Tabs #

Use 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 Tabs #

Use 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 Icons #

Use 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>

0.0.1-alpha.4

An unhandled error has occurred. Reload 🗙
An unhandled error has occurred. Reload 🗙