Tabs

Use tabs to switch between related panels. Bind value on the root; match each trigger and content by value. Tabs.List supports variant="default" | "line"; the root supports horizontal/vertical orientation.

1<script lang="ts">
2	import * as Tabs from '~/components/tabs';
3</script>
4
5<Tabs.Root value="account" class="w-[400px]">
6	<Tabs.List>
7		<Tabs.Trigger value="account">Account</Tabs.Trigger>
8		<Tabs.Trigger value="password">Password</Tabs.Trigger>
9	</Tabs.List>
10	<Tabs.Content value="account">Make changes to your account here.</Tabs.Content>
11	<Tabs.Content value="password">Change your password here.</Tabs.Content>
12</Tabs.Root>