On this page

Tabs

Build fast websites, faster with Astro’s next-gen island architecture.

The React framework for production-grade applications that scale.

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

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>
    </>
  );
}

<script setup lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/starwind/tabs";
</script>

<template>
  <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>
</template>

Installation

pnpx starwind@latest add tabs --framework astro

npx starwind@latest add tabs --framework astro

yarn dlx starwind@latest add tabs --framework astro

pnpx starwind@latest add tabs --framework react

npx starwind@latest add tabs --framework react

yarn dlx starwind@latest add tabs --framework react

pnpx starwind@latest add tabs --framework vue

npx starwind@latest add tabs --framework vue

yarn dlx starwind@latest add tabs --framework vue

Usage

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

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>
    </>
  );
}

<script setup lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/starwind/tabs";
</script>

<template>
  <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>
</template>

Composition

Match each trigger value to one content value:

Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent

Synced Tabs

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

React is a JavaScript library for building user interfaces.

Vue is a progressive framework for building user interfaces.

React’s virtual DOM optimizes rendering performance.

Vue’s reactivity system makes state management intuitive.

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

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

export function Example() {
  return (
    <>
      <Tabs defaultValue="react" syncKey="frameworks" className="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" className="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>
    </>
  );
}

<script setup lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/starwind/tabs";
</script>

<template>
  <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>
</template>

Disabled Triggers

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

Active tab content

Disabled tab content

Pending tab content

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

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

export function Example() {
  return (
    <>
      <Tabs defaultValue="active" className="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>
    </>
  );
}

<script setup lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/starwind/tabs";
</script>

<template>
  <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>
</template>

Nested Tabs

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

Outer Tab 1 content

This tab contains nested tabs:

Inner tab A content

Inner tab B content

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

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

export function Example() {
  return (
    <>
      <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 className="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>
    </>
  );
}

<script setup lang="ts">
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/starwind/tabs";
</script>

<template>
  <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>
</template>

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. Follow the Primitive and Runtime links for lower-level behavior props.

Tabs

Inherits div attributes. Omits `defaultValue`, `onChange`, and `value`.

Contains the following additional props:

Prop Type Default

defaultValue string | null —

Description: Sets the initial value when the component is uncontrolled.
Classification: Primitive override
Type imports: React import type { TabsValue } from "@starwind-ui/react";
Primitive prop: tabs.Root.defaultValue

orientation "horizontal" | "vertical" "horizontal"

Description: Selects the horizontal or vertical layout direction.
Classification: Primitive override
Primitive prop: tabs.Root.orientation

value string | null —

Description: Controls or identifies the component value.
Classification: Primitive override
Type imports: React import type { TabsValue } from "@starwind-ui/react";
Primitive prop: tabs.Root.value

Tabs List

Inherits div attributes.

Contains the following additional props:

Prop Type Default

activateOnFocus boolean —

Description: Activates the focused item while moving through the collection.
Classification: Primitive override
Primitive prop: tabs.List.activateOnFocus

loopFocus boolean —

Description: Wraps keyboard focus from the last item to the first and vice versa.
Classification: Primitive override
Primitive prop: tabs.List.loopFocus

Tabs Trigger

Inherits button attributes. Omits `type` and `value`.

Contains the following additional props:

Prop Type Default

value Required string —

Description: Controls or identifies the component value.
Classification: Wrapper prop

Tabs Content

Inherits div attributes.

Contains the following additional props:

Prop Type Default

keepMounted boolean —

Description: Keeps hidden content mounted in the DOM.
Classification: Primitive override
Primitive prop: tabs.Panel.keepMounted

value Required string —

Description: Controls or identifies the component value.
Classification: Wrapper prop

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Tabs.

Primitive API

Tabs Primitive

Runtime API

Tabs primitive: createTabs from @starwind-ui/runtime/tabs

Changelog

View version history v2.0.2 10 releases

v2.0.2

Fixed the active tab indicator position when its container is scrolled or transformed.

v2.0.1

Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

v2.0.0

Rebuilt Tabs on Starwind Runtime for selection, focus movement, and synchronized groups.
See the Tabs Primitive 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.