Tabs

1import {2  Card,3  CardContent,4  CardDescription,5  CardHeader,6  CardTitle,7} from "@/components/ui/card"8import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"910export function Example() {11  return (12    <Tabs defaultValue="overview" className="w-full">13      <TabsList>14        <TabsTrigger value="overview">Overview</TabsTrigger>15        <TabsTrigger value="analytics">Analytics</TabsTrigger>16        <TabsTrigger value="reports">Reports</TabsTrigger>17        <TabsTrigger value="settings">Settings</TabsTrigger>18      </TabsList>19      <TabsContent value="overview">20        <Card>21          <CardHeader>22            <CardTitle>Overview</CardTitle>23            <CardDescription>24              Key metrics and recent activity across your projects.25            </CardDescription>26          </CardHeader>27          <CardContent className="text-sm text-muted-foreground">28            12 active projects and 3 tasks waiting on review.29          </CardContent>30        </Card>31      </TabsContent>32      <TabsContent value="analytics">33        <Card>34          <CardHeader>35            <CardTitle>Analytics</CardTitle>36            <CardDescription>37              Traffic and conversion for the last 30 days.38            </CardDescription>39          </CardHeader>40          <CardContent className="text-sm text-muted-foreground">41            Sessions are up 8% week over week.42          </CardContent>43        </Card>44      </TabsContent>45      <TabsContent value="reports">46        <Card>47          <CardHeader>48            <CardTitle>Reports</CardTitle>49            <CardDescription>50              Export ready summaries for your team.51            </CardDescription>52          </CardHeader>53          <CardContent className="text-sm text-muted-foreground">54            Weekly digest ships every Monday at 09:00.55          </CardContent>56        </Card>57      </TabsContent>58      <TabsContent value="settings">59        <Card>60          <CardHeader>61            <CardTitle>Settings</CardTitle>62            <CardDescription>63              Preferences for this workspace.64            </CardDescription>65          </CardHeader>66          <CardContent className="text-sm text-muted-foreground">67            Notifications stay on for mention and review events.68          </CardContent>69        </Card>70      </TabsContent>71    </Tabs>72  )73}

1import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"23export function Example() {4  return (5    <Tabs defaultValue="overview">6      <TabsList variant="line">7        <TabsTrigger value="overview">Overview</TabsTrigger>8        <TabsTrigger value="analytics">Analytics</TabsTrigger>9        <TabsTrigger value="reports">Reports</TabsTrigger>10      </TabsList>11    </Tabs>12  )13}

1import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"23export function Example() {4  return (5    <Tabs defaultValue="account" orientation="vertical">6      <TabsList>7        <TabsTrigger value="account">Account</TabsTrigger>8        <TabsTrigger value="password">Password</TabsTrigger>9        <TabsTrigger value="notifications">Notifications</TabsTrigger>10      </TabsList>11    </Tabs>12  )13}

1import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"23export function Example() {4  return (5    <Tabs defaultValue="home">6      <TabsList>7        <TabsTrigger value="home">Home</TabsTrigger>8        <TabsTrigger value="disabled" disabled>9          Disabled10        </TabsTrigger>11      </TabsList>12    </Tabs>13  )14}

1import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"23export function Example() {4  return (5    <Tabs defaultValue="preview">6      <TabsList>7        <TabsTrigger value="preview">8          <AppWindowIcon />9          Preview10        </TabsTrigger>11        <TabsTrigger value="code">12          <CodeIcon />13          Code14        </TabsTrigger>15      </TabsList>16    </Tabs>17  )18}