Tabs

The Tabs component allows users to navigate between related sections of content, displaying one section at a time.

Usage

<script>
  import { 
    Tabs,
    TabsList,
    TabsTrigger,
    TabsContent
  } from "$lib/components/ui/tabs";
</script>

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings content</TabsContent>
  <TabsContent value="password">Password settings content</TabsContent>
</Tabs>

Examples

API Reference

Tabs

The main container component for tabs.

Property	Type	Default	Description
defaultValue	string	-	The value of the tab that should be active when initially rendered.
value	string	-	The controlled value of the tab to activate. Should be used with onValueChange.
onValueChange	(value: string) => void	-	Callback fired when the value changes.
orientation	"horizontal" \| "vertical"	"horizontal"	The orientation of the tabs.
class	string	-	Additional CSS classes to add to the tabs container.

TabsList

The container for the tab triggers.

Property	Type	Default	Description
class	string	-	Additional CSS classes to add to the tabs list.

TabsTrigger

The button that activates its associated content.

Property	Type	Default	Description
value	string	Required	A unique value that associates the trigger with a content.
disabled	boolean	false	Whether the tab trigger is disabled.
class	string	-	Additional CSS classes to add to the tab trigger.

TabsContent

The content that is associated with a tab trigger.

Property	Type	Default	Description
value	string	Required	A unique value that associates the content with a trigger.
class	string	-	Additional CSS classes to add to the tab content.

Implementation

The Tabs component is built on top of bits-ui, a collection of headless UI components for Svelte.

// Implementation details from tabs-trigger.svelte
<TabsPrimitive.Trigger
  bind:ref
  class={cn(
    "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow",
    className
  )}
  {value}
  {...restProps}
/>