Tabs

1import { Tabs, TabsList, TabsTrigger, TabsContent } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Tabs defaultValue="account">
6      <TabsList>
7        <TabsTrigger value="account">Account</TabsTrigger>
8        <TabsTrigger value="password">Password</TabsTrigger>
9      </TabsList>
10      <TabsContent value="account">
11        <p className="text-sm text-neutral-600 dark:text-neutral-400">Account settings.</p>
12      </TabsContent>
13      <TabsContent value="password">
14        <p className="text-sm text-neutral-600 dark:text-neutral-400">Password settings.</p>
15      </TabsContent>
16    </Tabs>
17  )
18}

1import { Tabs, TabsList, TabsTrigger, TabsContent } from "@glinui/ui"
2
3export function Demo() {
4  return (
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">Glass tab content.</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 Demo() {
4  return (
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 tab surface.</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 tab surface.</TabsContent>
20        <TabsContent value="matte-2" variant="matte">Second matte panel.</TabsContent>
21      </Tabs>
22    </div>
23  )
24}