Tabs

1import { Tabs, TabsList, TabsTrigger, TabsContent } from "@glinui/ui"
2
3export function TabsBasicDemo() {
4return (
5  <Tabs defaultValue="overview">
6    <TabsList>
7      <TabsTrigger value="overview">Overview</TabsTrigger>
8      <TabsTrigger value="settings">Settings</TabsTrigger>
9    </TabsList>
10    <TabsContent value="overview">Overview content</TabsContent>
11    <TabsContent value="settings">Settings content</TabsContent>
12  </Tabs>
13)
14}

1import { Tabs, TabsList, TabsTrigger, TabsContent } from "@glinui/ui"
2
3export function TabsGlassDemo() {
4return (
5  <Tabs defaultValue="first">
6    <TabsList variant="glass">
7      <TabsTrigger value="first" variant="glass">First</TabsTrigger>
8      <TabsTrigger value="second" variant="glass">Second</TabsTrigger>
9    </TabsList>
10    <TabsContent value="first" variant="glass">First panel</TabsContent>
11    <TabsContent value="second" variant="glass">Second panel</TabsContent>
12  </Tabs>
13)
14}

1import { Tabs, TabsList, TabsTrigger, TabsContent } from "@glinui/ui"
2
3export function TabsSurfaceVariantsDemo() {
4return (
5  <div className="grid gap-4 md:grid-cols-2">
6    <Tabs defaultValue="liquid-1">
7      <TabsList variant="liquid">
8        <TabsTrigger value="liquid-1" variant="liquid">Liquid A</TabsTrigger>
9        <TabsTrigger value="liquid-2" variant="liquid">Liquid B</TabsTrigger>
10      </TabsList>
11      <TabsContent value="liquid-1" variant="liquid">Liquid panel</TabsContent>
12      <TabsContent value="liquid-2" variant="liquid">Second liquid panel</TabsContent>
13    </Tabs>
14    <Tabs defaultValue="matte-1">
15      <TabsList variant="matte">
16        <TabsTrigger value="matte-1" variant="matte">Matte A</TabsTrigger>
17        <TabsTrigger value="matte-2" variant="matte">Matte B</TabsTrigger>
18      </TabsList>
19      <TabsContent value="matte-1" variant="matte">Matte panel</TabsContent>
20      <TabsContent value="matte-2" variant="matte">Second matte panel</TabsContent>
21    </Tabs>
22  </div>
23)
24}