<Tabs DefaultValue="overview" Class="w-full">
<TabsList>
<TabsTrigger Value="overview">Overview</TabsTrigger>
<TabsTrigger Value="analytics">Analytics</TabsTrigger>
<TabsTrigger Value="reports">Reports</TabsTrigger>
<TabsTrigger Value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent Value="overview">
<Card>
<CardHeader>
<CardTitle>Overview</CardTitle>
<CardDescription>View your key metrics and recent project activity. Track progress across all your active projects.</CardDescription>
</CardHeader>
<CardContent Class="text-sm text-muted-foreground">
You have 12 active projects and 3 pending tasks.
</CardContent>
</Card>
</TabsContent>
<TabsContent Value="analytics">
<Card>
<CardHeader>
<CardTitle>Analytics</CardTitle>
<CardDescription>Track performance and user engagement metrics. Monitor trends and identify growth opportunities.</CardDescription>
</CardHeader>
<CardContent Class="text-sm text-muted-foreground">
Page views are up 25% compared to last month.
</CardContent>
</Card>
</TabsContent>
<TabsContent Value="reports">
<Card>
<CardHeader>
<CardTitle>Reports</CardTitle>
<CardDescription>Generate and download your detailed reports. Export data in multiple formats for analysis.</CardDescription>
</CardHeader>
<CardContent Class="text-sm text-muted-foreground">
You have 5 reports ready and available to export.
</CardContent>
</Card>
</TabsContent>
<TabsContent Value="settings">
<Card>
<CardHeader>
<CardTitle>Settings</CardTitle>
<CardDescription>Manage your account preferences and options. Customize your experience to fit your needs.</CardDescription>
</CardHeader>
<CardContent Class="text-sm text-muted-foreground">
Configure notifications, security, and themes.
</CardContent>
</Card>
</TabsContent>
</Tabs>Installation
Install the tabs component using the command or manual steps.
blazor-shadcn add tabsUsage
@using BlazorShadcn.Components.UI<Tabs DefaultValue="account" Class="w-[400px]">
<TabsList Class="grid w-full grid-cols-2">
<TabsTrigger Value="account">Account</TabsTrigger>
<TabsTrigger Value="password">Password</TabsTrigger>
</TabsList>
<TabsContent Value="account">Make changes to your account here.</TabsContent>
<TabsContent Value="password">Change your password here.</TabsContent>
</Tabs>Examples
Line
Use Variant="line" on TabsList for the underline style.
<Tabs DefaultValue="overview">
<TabsList Variant="line">
<TabsTrigger Value="overview">Overview</TabsTrigger>
<TabsTrigger Value="analytics">Analytics</TabsTrigger>
<TabsTrigger Value="reports">Reports</TabsTrigger>
</TabsList>
</Tabs>Vertical
Use Orientation="vertical" for stacked tabs.
<Tabs DefaultValue="account" Orientation="vertical">
<TabsList>
<TabsTrigger Value="account">Account</TabsTrigger>
<TabsTrigger Value="password">Password</TabsTrigger>
<TabsTrigger Value="notifications">Notifications</TabsTrigger>
</TabsList>
</Tabs>Disabled
<Tabs DefaultValue="home">
<TabsList>
<TabsTrigger Value="home">Home</TabsTrigger>
<TabsTrigger Value="settings" Disabled="true">Disabled</TabsTrigger>
</TabsList>
</Tabs>Icons
<Tabs DefaultValue="preview">
<TabsList>
<TabsTrigger Value="preview">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<rect x="3" y="4" width="18" height="14" rx="2" />
<path d="M8 20h8" />
</svg>
Preview
</TabsTrigger>
<TabsTrigger Value="code">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="m8 9-3 3 3 3" />
<path d="m16 9 3 3-3 3" />
</svg>
Code
</TabsTrigger>
</TabsList>
</Tabs>