# Tabs

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

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<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>

```

## 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. |

**Composition and refs**

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

Inherits from [Bits UI Tabs.Root](https://bits-ui.com/docs/components/tabs#root).

### TabsContent

Wraps the primary content for the parent component.

**Composition and refs**

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

Inherits from [Bits UI Tabs.Content](https://bits-ui.com/docs/components/tabs#content).

### TabsList

Wraps a list of related items.

**Composition and refs**

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

Inherits from [Bits UI Tabs.List](https://bits-ui.com/docs/components/tabs#list).

### TabsTrigger

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

**Composition and refs**

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

Inherits from [Bits UI Tabs.Trigger](https://bits-ui.com/docs/components/tabs#trigger).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Layout & Navigation |
| Particles | 13 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/tabs.json` for the complete local file and dependency closure.
- Tabs is stable in the current source catalog.