tabs

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/tabs/Tabs.astro directly.
3/**
4 * @component Tabs
5 * @title Tabs
6 * @description Organize content into tabbed panels, rendering one panel at a time.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2523-6067&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <Tabs defaultValue="overview" class="w-full max-w-[400px]">
12 *   <TabsList>
13 *     <TabsTrigger value="overview">Overview</TabsTrigger>
14 *     <TabsTrigger value="analytics">Analytics</TabsTrigger>
15 *     <TabsTrigger value="reports">Reports</TabsTrigger>
16 *     <TabsTrigger value="settings">Settings</TabsTrigger>
17 *   </TabsList>
18 *   <TabsContent value="overview">
19 *     <Card>
20 *       <CardHeader>
21 *         <CardTitle>Overview</CardTitle>
22 *         <CardDescription>
23 *           View key metrics and recent activity across active projects.
24 *         </CardDescription>
25 *       </CardHeader>
26 *       <CardContent class="text-sm text-muted-foreground">
27 *         You have 12 active projects and 3 pending tasks.
28 *       </CardContent>
29 *     </Card>
30 *   </TabsContent>
31 *   <TabsContent value="analytics">
32 *     <Card>
33 *       <CardHeader>
34 *         <CardTitle>Analytics</CardTitle>
35 *         <CardDescription>
36 *           Track engagement trends and performance over time.
37 *         </CardDescription>
38 *       </CardHeader>
39 *       <CardContent class="text-sm text-muted-foreground">
40 *         Page views are up 25% compared to last month.
41 *       </CardContent>
42 *     </Card>
43 *   </TabsContent>
44 *   <TabsContent value="reports">
45 *     <Card>
46 *       <CardHeader>
47 *         <CardTitle>Reports</CardTitle>
48 *         <CardDescription>
49 *           Generate detailed exports for sharing and analysis.
50 *         </CardDescription>
51 *       </CardHeader>
52 *       <CardContent class="text-sm text-muted-foreground">
53 *         You have 5 reports ready to export.
54 *       </CardContent>
55 *     </Card>
56 *   </TabsContent>
57 *   <TabsContent value="settings">
58 *     <Card>
59 *       <CardHeader>
60 *         <CardTitle>Settings</CardTitle>
61 *         <CardDescription>
62 *           Manage account preferences and personalization options.
63 *         </CardDescription>
64 *       </CardHeader>
65 *       <CardContent class="text-sm text-muted-foreground">
66 *         Configure notifications, security, and themes.
67 *       </CardContent>
68 *     </Card>
69 *   </TabsContent>
70 * </Tabs>
71 *
72 * @usage
73 *
74// … truncated