8.0k New

Tabs

Previous Next

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Docs API Reference

Epicenter

Local-first, open source apps

Special Sponsor
Overview

View your key metrics and recent project activity. Track progress across all your active projects.

You have 12 active projects and 3 pending tasks.
<script lang="ts">
	import * as Card from "$lib/components/ui/card/index.js";
	import * as Tabs from "$lib/components/ui/tabs/index.js";
 
	const tabs = [
		{
			value: "overview",
			title: "Overview",
			description:
				"View your key metrics and recent project activity. Track progress across all your active projects.",
			content: "You have 12 active projects and 3 pending tasks.",
		},
		{
			value: "analytics",
			title: "Analytics",
			description:
				"Track performance and user engagement metrics. Monitor trends and identify growth opportunities.",
			content: "Page views are up 25% compared to last month.",
		},
		{
			value: "reports",
			title: "Reports",
			description:
				"Generate and download your detailed reports. Export data in multiple formats for analysis.",
			content: "You have 5 reports ready and available to export.",
		},
		{
			value: "settings",
			title: "Settings",
			description:
				"Manage your account preferences and options. Customize your experience to fit your needs.",
			content: "Configure notifications, security, and themes.",
		},
	];
</script>
 
<Tabs.Root value="overview" class="w-[400px]">
	<Tabs.List>
		{#each tabs as tab (tab.value)}
			<Tabs.Trigger value={tab.value}>{tab.title}</Tabs.Trigger>
		{/each}
	</Tabs.List>
	{#each tabs as tab (tab.value)}
		<Tabs.Content value={tab.value}>
			<Card.Root>
				<Card.Header>
					<Card.Title>{tab.title}</Card.Title>
					<Card.Description>{tab.description}</Card.Description>
				</Card.Header>
				<Card.Content class="text-sm text-muted-foreground">{tab.content}</Card.Content>
			</Card.Root>
		</Tabs.Content>
	{/each}
</Tabs.Root>

Installation 

pnpm dlx shadcn-svelte@latest add tabs

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>

Line

Use the variant="line" prop on Tabs.List for a line style.

<script lang="ts">
	import * as Tabs from "$lib/components/ui/tabs/index.js";
</script>
 
<Tabs.Root value="overview">
	<Tabs.List variant="line">
		<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
		<Tabs.Trigger value="analytics">Analytics</Tabs.Trigger>
		<Tabs.Trigger value="reports">Reports</Tabs.Trigger>
	</Tabs.List>
</Tabs.Root>

Vertical

Use orientation="vertical" for vertical tabs.

<script lang="ts">
	import * as Tabs from "$lib/components/ui/tabs/index.js";
</script>
 
<Tabs.Root value="account" orientation="vertical">
	<Tabs.List>
		<Tabs.Trigger value="account">Account</Tabs.Trigger>
		<Tabs.Trigger value="password">Password</Tabs.Trigger>
		<Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
	</Tabs.List>
</Tabs.Root>

Disabled 

<script lang="ts">
	import * as Tabs from "$lib/components/ui/tabs/index.js";
</script>
 
<Tabs.Root value="home">
	<Tabs.List>
		<Tabs.Trigger value="home">Home</Tabs.Trigger>
		<Tabs.Trigger value="settings" disabled>Disabled</Tabs.Trigger>
	</Tabs.List>
</Tabs.Root>

Icons 

<script lang="ts">
	import AppWindowIcon from "@lucide/svelte/icons/app-window";
	import CodeIcon from "@lucide/svelte/icons/code";
	import * as Tabs from "$lib/components/ui/tabs/index.js";
</script>
 
<Tabs.Root value="preview">
	<Tabs.List>
		<Tabs.Trigger value="preview">
			<AppWindowIcon />
			Preview
		</Tabs.Trigger>
		<Tabs.Trigger value="code">
			<CodeIcon />
			Code
		</Tabs.Trigger>
	</Tabs.List>
</Tabs.Root>