Tabs
Switch between related panels of content.
Make changes to your account here. Click save when you're done.
Change your password here. You'll be signed out afterwards.
<script lang="ts">
import {
Tabs,
TabsList,
TabsTrigger,
TabsContent
} from "$lib/components/ui/tabs";
</script>
<Tabs value="account" class="w-full max-w-md">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent
value="account"
class="text-sm leading-[1.6] tracking-[-0.39px] text-(--text)/72"
>
Make changes to your account here. Click save when you're done.
</TabsContent>
<TabsContent
value="password"
class="text-sm leading-[1.6] tracking-[-0.39px] text-(--text)/72"
>
Change your password here. You'll be signed out afterwards.
</TabsContent>
</Tabs>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the tabs source from the registry into $lib/components/ui/tabs.
Usage
<script lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from '$lib/components/ui/tabs';
</script>
<Tabs value="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">Account settings.</TabsContent>
<TabsContent value="password">Password settings.</TabsContent>
</Tabs>