Tabs

API Reference

Usage

<script lang="ts">
  import { Tabs, TabsList, TabsTrigger, TabsContent } from '$lib/components/tabs';
</script>

<Tabs value="menu">
  <TabsList>
    <TabsTrigger value="menu">Menu</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
    <TabsTrigger value="account">Account</TabsTrigger>
  </TabsList>
  <TabsContent value="menu"></TabsContent>
  <TabsContent value="settings"></TabsContent>
  <TabsContent value="account"></TabsContent>
</Tabs>

Properties

The Tabs component extends the Bits UI <Tabs> component. Find the full list of available properties in the official Bits UI documentation.

Prop	Type	Default
`variant`	`string`	`underline`

TabsTrigger

Prop	Type	Default
`icon`	`ComponentType`	-

Examples

Icon support

Use the icon property to add an icon to the TabsTrigger component.

Variants

Use the variant property to change the appearance of the tabs.

Disabled

Use the disabled property to prevent users from interacting with the tab.

Tabs

On this page