Docs
Tabs
Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
<script lang="ts">
import * as Tabs from "$lib/components/ui/tabs/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
</script>
<Tabs.Root value="account" class="w-[400px]">
<Tabs.List class="grid w-full grid-cols-2">
<Tabs.Trigger value="account">Account</Tabs.Trigger>
<Tabs.Trigger value="password">Password</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account">
<Card.Root>
<Card.Header>
<Card.Title>Account</Card.Title>
<Card.Description>
Make changes to your account here. Click save when you're done.
</Card.Description>
</Card.Header>
<Card.Content class="space-y-2">
<div class="space-y-1">
<Label for="name">Name</Label>
<Input id="name" value="Pedro Duarte" />
</div>
<div class="space-y-1">
<Label for="username">Username</Label>
<Input id="username" value="@peduarte" />
</div>
</Card.Content>
<Card.Footer>
<Button>Save changes</Button>
</Card.Footer>
</Card.Root>
</Tabs.Content>
<Tabs.Content value="password">
<Card.Root>
<Card.Header>
<Card.Title>Password</Card.Title>
<Card.Description>
Change your password here. After saving, you'll be logged out.
</Card.Description>
</Card.Header>
<Card.Content class="space-y-2">
<div class="space-y-1">
<Label for="current">Current password</Label>
<Input id="current" type="password" />
</div>
<div class="space-y-1">
<Label for="new">New password</Label>
<Input id="new" type="password" />
</div>
</Card.Content>
<Card.Footer>
<Button>Save password</Button>
</Card.Footer>
</Card.Root>
</Tabs.Content>
</Tabs.Root>
<script lang="ts">
import * as Tabs from "$lib/components/ui/tabs/index.js";
import * as Card from "$lib/components/ui/card/index.js";
import { Button } from "$lib/components/ui/button/index.js";
import { Input } from "$lib/components/ui/input/index.js";
import { Label } from "$lib/components/ui/label/index.js";
</script>
<Tabs.Root value="account" class="w-[400px]">
<Tabs.List class="grid w-full grid-cols-2">
<Tabs.Trigger value="account">Account</Tabs.Trigger>
<Tabs.Trigger value="password">Password</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account">
<Card.Root>
<Card.Header>
<Card.Title>Account</Card.Title>
<Card.Description>
Make changes to your account here. Click save when you're done.
</Card.Description>
</Card.Header>
<Card.Content class="space-y-2">
<div class="space-y-1">
<Label for="name">Name</Label>
<Input id="name" value="Pedro Duarte" />
</div>
<div class="space-y-1">
<Label for="username">Username</Label>
<Input id="username" value="@peduarte" />
</div>
</Card.Content>
<Card.Footer>
<Button>Save changes</Button>
</Card.Footer>
</Card.Root>
</Tabs.Content>
<Tabs.Content value="password">
<Card.Root>
<Card.Header>
<Card.Title>Password</Card.Title>
<Card.Description>
Change your password here. After saving, you'll be logged out.
</Card.Description>
</Card.Header>
<Card.Content class="space-y-2">
<div class="space-y-1">
<Label for="current">Current password</Label>
<Input id="current" type="password" />
</div>
<div class="space-y-1">
<Label for="new">New password</Label>
<Input id="new" type="password" />
</div>
</Card.Content>
<Card.Footer>
<Button>Save password</Button>
</Card.Footer>
</Card.Root>
</Tabs.Content>
</Tabs.Root>
Installation
npx shadcn-svelte@next add tabs
Install bits-ui:
npm i bits-ui -D
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import * as Tabs from "$lib/components/ui/tabs/index.js";
</script>
<Tabs.Root value="account" class="w-[400px]">
<Tabs.List>
<Tabs.Trigger value="account">Account</Tabs.Trigger>
<Tabs.Trigger value="password">Password</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account">
Make changes to your account here.
</Tabs.Content>
<Tabs.Content value="password">Change your password here.</Tabs.Content>
</Tabs.Root>
On This Page