# Tabs

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/starwind/tabs";
---

<Tabs defaultValue="astro" class="max-w-[400px]">
  <TabsList>
    <TabsTrigger value="astro">Astro</TabsTrigger>
    <TabsTrigger value="next">Next.js</TabsTrigger>
  </TabsList>
  <TabsContent value="astro">
    Build fast websites, faster with Astro's next-gen island architecture.
  </TabsContent>
  <TabsContent value="next">
    The React framework for production-grade applications that scale.
  </TabsContent>
</Tabs>
```
  </div>
  <div slot="react">
```tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/starwind/tabs";

export function Example() {
  return (
    <>
      <Tabs defaultValue="astro" className="max-w-[400px]">
            <TabsList>
              <TabsTrigger value="astro">Astro</TabsTrigger>
              <TabsTrigger value="next">Next.js</TabsTrigger>
            </TabsList>
            <TabsContent value="astro">
              Build fast websites, faster with Astro's next-gen island architecture.
            </TabsContent>
            <TabsContent value="next">
              The React framework for production-grade applications that scale.
            </TabsContent>
          </Tabs>
    </>
  );
}
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add tabs
```

## Usage

### Synced Tabs

Use the `syncKey` prop to synchronize multiple tab groups. All tabs with the same `syncKey` will update together.

```astro
---
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/starwind/tabs";
---

<Tabs defaultValue="react" syncKey="frameworks" class="max-w-[400px]">
  <TabsList>
    <TabsTrigger value="react">React</TabsTrigger>
    <TabsTrigger value="vue">Vue</TabsTrigger>
  </TabsList>
  <TabsContent value="react">
    React is a JavaScript library for building user interfaces.
  </TabsContent>
  <TabsContent value="vue">
    Vue is a progressive framework for building user interfaces.
  </TabsContent>
</Tabs>

<Tabs defaultValue="react" syncKey="frameworks" class="max-w-[400px]">
  <TabsList>
    <TabsTrigger value="react">React</TabsTrigger>
    <TabsTrigger value="vue">Vue</TabsTrigger>
  </TabsList>
  <TabsContent value="react">
    React's virtual DOM optimizes rendering performance.
  </TabsContent>
  <TabsContent value="vue">
    Vue's reactivity system makes state management intuitive.
  </TabsContent>
</Tabs>
```

### Disabled Triggers

Use the `disabled` attribute to prevent a tab from being selected.

```astro
---
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/starwind/tabs";
---

<Tabs defaultValue="active" class="max-w-[400px]">
  <TabsList>
    <TabsTrigger value="active">Active</TabsTrigger>
    <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
    <TabsTrigger value="pending">Pending</TabsTrigger>
  </TabsList>
  <TabsContent value="active">Active tab content</TabsContent>
  <TabsContent value="disabled">Disabled tab content</TabsContent>
  <TabsContent value="pending">Pending tab content</TabsContent>
</Tabs>
```

### Nested Tabs

Show how tabs can be nested by placing a Tabs component inside a TabsContent panel.

```astro
---
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/starwind/tabs";
---

<Tabs defaultValue="outer-1">
  <TabsList>
    <TabsTrigger value="outer-1">Outer Tab 1</TabsTrigger>
    <TabsTrigger value="outer-2">Outer Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="outer-1">
    Outer Tab 1 content
  </TabsContent>
  <TabsContent value="outer-2">
    <div class="space-y-2">
      This tab contains nested tabs:
      <Tabs defaultValue="inner-a">
        <TabsList>
          <TabsTrigger value="inner-a">Inner A</TabsTrigger>
          <TabsTrigger value="inner-b">Inner B</TabsTrigger>
        </TabsList>
        <TabsContent value="inner-a">Inner tab A content</TabsContent>
        <TabsContent value="inner-b">Inner tab B content</TabsContent>
      </Tabs>
    </div>
  </TabsContent>
</Tabs>
```

## Framework Availability
Tabs is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### Tabs
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `defaultValue` | `string \| null` | No | - | Primitive override | Sets the initial value when the component is uncontrolled. |
| `orientation` | `"horizontal" \| "vertical"` | No | `"horizontal"` | Primitive override | Selects the horizontal or vertical layout direction. |
| `value` | `string \| null` | No | - | Primitive override | Controls or identifies the component value. |
- Inherits div attributes. Omits `defaultValue`, `onChange`, and `value`.

### TabsList
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `activateOnFocus` | `boolean` | No | - | Primitive override | Activates the focused item while moving through the collection. |
| `loopFocus` | `boolean` | No | - | Primitive override | Wraps keyboard focus from the last item to the first and vice versa. |
- Inherits div attributes.

### TabsTrigger
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `value` | `string` | Yes | - | Wrapper prop | Controls or identifies the component value. |
- Inherits button attributes. Omits `type` and `value`.

### TabsContent
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `keepMounted` | `boolean` | No | - | Primitive override | Keeps hidden content mounted in the DOM. |
| `value` | `string` | Yes | - | Wrapper prop | Controls or identifies the component value. |
- Inherits div attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Tabs Primitive](/docs/primitives/tabs/)
- Runtime factory: [`createTabs`](/docs/runtime/#create-tabs) from `@starwind-ui/runtime/tabs`

## Changelog

### v2.0.0

- Rebuilt Tabs on Starwind Runtime for selection, focus movement, and synchronized groups.
- See the [Tabs Primitive](/docs/primitives/tabs/) for the underlying unstyled anatomy and behavior API.

### v1.4.3

- Refactor tailwind variants functions into separate `variants.ts` file

### v1.4.1 

- Add `starwind:init` event listener to enable initialization of additional Tabs loaded after an initial page load, such as when using server islands

### v1.4.0

- style and focus state updates

### v1.3.0 

- Add a `data-slot` attribute to all components to enable global styling updates

### v1.2.0

- Add support for nested tabs

### v1.1.1

- Small script cleanup

### v1.1.0

- `tailwind-variants` now implemented. This uses `tailwind-merge` under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the "class" prop.