home Docs Components Samples

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Installation

Add the Tabs component using the CLI:

shadcnblazor component add tabs

Usage

The Tabs component displays one panel of content at a time. Use TabsList to hold the triggers and TabsContent for each panel. Each trigger and content requires a matching Value. Set DefaultValue to pre-select a tab.

Make changes to your account here. Click save when you're done.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Tabs DefaultValue="account" Class="w-[400px]">
    <TabsList>
        <TabsTrigger Value="account">Account</TabsTrigger>
        <TabsTrigger Value="password">Password</TabsTrigger>
    </TabsList>
    <TabsContent Value="account">
        <p class="text-sm text-muted-foreground">
            Make changes to your account here. Click save when you're done.
        </p>
    </TabsContent>
    <TabsContent Value="password">
        <p class="text-sm text-muted-foreground">
            Change your password here. After saving, you'll be logged out.
        </p>
    </TabsContent>
</Tabs>

Examples

Disabled

Set Disabled="true" on a TabsTrigger to prevent it from being selected. Disabled triggers are skipped during keyboard navigation.

Your active items will appear here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Tabs DefaultValue="active" Class="w-[400px]">
    <TabsList>
        <TabsTrigger Value="active">Active</TabsTrigger>
        <TabsTrigger Value="pending">Pending</TabsTrigger>
        <TabsTrigger Value="archived" Disabled="true">Archived</TabsTrigger>
    </TabsList>
    <TabsContent Value="active">
        <p class="text-sm text-muted-foreground">Your active items will appear here.</p>
    </TabsContent>
    <TabsContent Value="pending">
        <p class="text-sm text-muted-foreground">Items awaiting processing are listed here.</p>
    </TabsContent>
    <TabsContent Value="archived">
        <p class="text-sm text-muted-foreground">Archived items are not available.</p>
    </TabsContent>
</Tabs>

Vertical

Set Orientation="vertical" on the Tabs root to arrange the trigger list and content side by side.

Update your profile settings here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Tabs DefaultValue="profile" Orientation="vertical" Class="w-[500px]">
    <TabsList Class="flex-col h-auto w-[140px] shrink-0">
        <TabsTrigger Value="profile" Class="w-full justify-start">Profile</TabsTrigger>
        <TabsTrigger Value="account" Class="w-full justify-start">Account</TabsTrigger>
        <TabsTrigger Value="notifications" Class="w-full justify-start">Notifications</TabsTrigger>
    </TabsList>
    <TabsContent Value="profile" Class="mt-0 ml-4 flex-1">
        <p class="text-sm text-muted-foreground">Update your profile settings here.</p>
    </TabsContent>
    <TabsContent Value="account" Class="mt-0 ml-4 flex-1">
        <p class="text-sm text-muted-foreground">Manage your account preferences.</p>
    </TabsContent>
    <TabsContent Value="notifications" Class="mt-0 ml-4 flex-1">
        <p class="text-sm text-muted-foreground">Configure how you receive notifications.</p>
    </TabsContent>
</Tabs>

With Icons

Place an icon before the label text inside a TabsTrigger to enrich the tab labels visually.

Listen to your favorite music tracks and albums.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<Tabs DefaultValue="music" Class="w-[400px]">
    <TabsList>
        <TabsTrigger Value="music">
            <LuMusic class="mr-2 h-4 w-4" />
            Music
        </TabsTrigger>
        <TabsTrigger Value="podcasts">
            <LuMic class="mr-2 h-4 w-4" />
            Podcasts
        </TabsTrigger>
        <TabsTrigger Value="live">
            <LuRadio class="mr-2 h-4 w-4" />
            Live
        </TabsTrigger>
    </TabsList>
    <TabsContent Value="music">
        <p class="text-sm text-muted-foreground">Listen to your favorite music tracks and albums.</p>
    </TabsContent>
    <TabsContent Value="podcasts">
        <p class="text-sm text-muted-foreground">Discover and follow podcasts on any topic.</p>
    </TabsContent>
    <TabsContent Value="live">
        <p class="text-sm text-muted-foreground">Tune in to live radio stations around the world.</p>
    </TabsContent>
</Tabs>

Inside a Card

Tabs compose naturally inside a Card for settings panels, dashboards, or grouped content views.

A summary of your account activity and recent events.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<Card Class="w-[400px]">
    <ChildContent>
        <Tabs DefaultValue="overview">
            <TabsList Class="w-full">
                <TabsTrigger Value="overview" Class="flex-1">Overview</TabsTrigger>
                <TabsTrigger Value="analytics" Class="flex-1">Analytics</TabsTrigger>
                <TabsTrigger Value="reports" Class="flex-1">Reports</TabsTrigger>
            </TabsList>
            <TabsContent Value="overview">
                <div class="py-4">
                    <p class="text-sm text-muted-foreground">A summary of your account activity and recent events.</p>
                </div>
            </TabsContent>
            <TabsContent Value="analytics">
                <div class="py-4">
                    <p class="text-sm text-muted-foreground">Detailed analytics and performance metrics for your projects.</p>
                </div>
            </TabsContent>
            <TabsContent Value="reports">
                <div class="py-4">
                    <p class="text-sm text-muted-foreground">Generated reports and exportable data for your records.</p>
                </div>
            </TabsContent>
        </Tabs>
    </ChildContent>
</Card>

Loading...

An unhandled error has occurred. Reload 🗙