Tabs

1<Tabs defaultValue="overview" className="w-full">
2  <TabsList>
3    <TabsTrigger value="overview">Overview</TabsTrigger>
4    <TabsTrigger value="analytics">Analytics</TabsTrigger>
5    <TabsTrigger value="reports">Reports</TabsTrigger>
6  </TabsList>
7  <TabsContent value="overview">
8    <Card>
9      <CardHeader code="0x00" title="OVERVIEW" meta="View your account overview and recent activity." />
10      <CardContent className="space-y-2">
11        <p>Your dashboard content goes here.</p>
12      </CardContent>
13    </Card>
14  </TabsContent>
15  <TabsContent value="analytics">
16    <Card>
17      <CardHeader code="0x01" title="ANALYTICS" meta="View detailed analytics and insights." />
18      <CardContent className="space-y-2">
19        <p>Analytics data will be displayed here.</p>
20      </CardContent>
21    </Card>
22  </TabsContent>
23  <TabsContent value="reports">
24    <Card>
25      <CardHeader code="0x02" title="REPORTS" meta="Generate and view reports." />
26      <CardContent className="space-y-2">
27        <p>Reports will be shown here.</p>
28      </CardContent>
29    </Card>
30  </TabsContent>
31</Tabs>

1<Tabs defaultValue="enabled" className="w-[400px]">
2  <TabsList>
3    <TabsTrigger value="enabled">Enabled</TabsTrigger>
4    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
5    <TabsTrigger value="another">Another</TabsTrigger>
6  </TabsList>
7  <TabsContent value="enabled">
8    This tab is enabled and active.
9  </TabsContent>
10  <TabsContent value="disabled">
11    This content won't be shown as the tab is disabled.
12  </TabsContent>
13  <TabsContent value="another">
14    Another enabled tab.
15  </TabsContent>
16</Tabs>

1<Card>
2  <CardHeader code="0x00" title="NAVIGATION" />
3  <Tabs defaultValue="overview" className="w-full">
4    <TabsList className="w-full">
5      <TabsTrigger value="overview">[OVERVIEW]</TabsTrigger>
6      <TabsTrigger value="settings">[SETTINGS]</TabsTrigger>
7      <TabsTrigger value="billing">[BILLING]</TabsTrigger>
8    </TabsList>
9    <TabsContent value="overview" className="p-4">
10      <p>Overview content goes here.</p>
11    </TabsContent>
12    <TabsContent value="settings" className="p-4">
13      <p>Settings content goes here.</p>
14    </TabsContent>
15    <TabsContent value="billing" className="p-4">
16      <p>Billing information goes here.</p>
17    </TabsContent>
18  </Tabs>
19</Card>

1<Tabs defaultValue="tab1" className="w-full">
2  <TabsList className="w-full">
3    <TabsTrigger value="tab1" className="flex-1">Tab 1</TabsTrigger>
4    <TabsTrigger value="tab2" className="flex-1">Tab 2</TabsTrigger>
5    <TabsTrigger value="tab3" className="flex-1">Tab 3</TabsTrigger>
6  </TabsList>
7  <TabsContent value="tab1">Content for tab 1</TabsContent>
8  <TabsContent value="tab2">Content for tab 2</TabsContent>
9  <TabsContent value="tab3">Content for tab 3</TabsContent>
10</Tabs>

1<Tabs defaultValue="tab1" orientation="vertical" className="flex gap-4">
2  <TabsList className="flex-col h-auto">
3    <TabsTrigger value="tab1" className="w-full justify-start">
4      Profile
5    </TabsTrigger>
6    <TabsTrigger value="tab2" className="w-full justify-start">
7      Settings
8    </TabsTrigger>
9    <TabsTrigger value="tab3" className="w-full justify-start">
10      Notifications
11    </TabsTrigger>
12  </TabsList>
13  <div className="flex-1">
14    <TabsContent value="tab1">
15      Profile settings and information
16    </TabsContent>
17    <TabsContent value="tab2">
18      Application settings
19    </TabsContent>
20    <TabsContent value="tab3">
21      Notification preferences
22    </TabsContent>
23  </div>
24</Tabs>