Tabs

A component for toggling between related panels on the same page.

<script lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from "coss-svelte";
</script>

<Tabs value="tab-1">
	<TabsList>
		<TabsTrigger value="tab-1">Tab 1</TabsTrigger>
		<TabsTrigger value="tab-2">Tab 2</TabsTrigger>
		<TabsTrigger value="tab-3">Tab 3</TabsTrigger>
	</TabsList>
	<TabsContent value="tab-1">
		<p class="p-4 text-center text-muted-foreground text-xs">Tab 1 content</p>
	</TabsContent>
	<TabsContent value="tab-2">
		<p class="p-4 text-center text-muted-foreground text-xs">Tab 2 content</p>
	</TabsContent>
	<TabsContent value="tab-3">
		<p class="p-4 text-center text-muted-foreground text-xs">Tab 3 content</p>
	</TabsContent>
</Tabs>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "coss-svelte";

Anatomy

Tabs
TabsContent
TabsList
TabsTrigger

API Reference

Tabs

A component for toggling between related panels on the same page.

Prop	Type	Default	Description
`bind:value`	`string`	`"tab-1"`	Current value for the component. Bind with `bind:value` when supported.
`tabs`	`TabItem[]`	`["Overview", "Details"]`	Tab labels rendered by the built-in fallback layout.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Tabs.Root.

TabsContent

Wraps the primary content for the parent component.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Tabs.Content.

TabsList

Wraps a list of related items.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Tabs.List.

TabsTrigger

Renders the control that opens, closes, or selects related content.

children : Snippet<[]>child : Snippet<[{ props: Record<string, unknown> }]>bind:ref : HTMLElement | null

Inherits from Bits UI Tabs.Trigger.

Implementation Details

Status: Stable
Foundation: bits
Category: Layout & Navigation
Particles: 13