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.
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
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>Segmented presentation
Use <Tabs variant="segmented"> for compact view switches such as Preview/Code. The default Aquamarine tabs use the navigation underline presentation. For choosing a single value instead of switching panels, use Choice Group.