---
layout: ~/layouts/MdxDocLayout.astro
title: "Tabs"
description: "A set of layered sections of content, known as tab panels, displayed one at a time."
sourceFile: "components/tabs"
---

import ComponentExample from "~/components/docs/ComponentExample.astro";
import ComponentSection from "~/components/docs/ComponentSection.astro";
import PropsTable from "~/components/docs/PropsTable.astro";
import {
  TabsDefaultDemo,
  TabsSegmentedDemo,
  TabsUnderlineDemo,
  TabsSmDemo,
  TabsControlledDemo,
  TabsManyDemo,
} from "~/components/demos/TabsDemo";

{/* Hero Demo */}

<ComponentSection>
  <ComponentExample demo="TabsDefaultDemo">
    <TabsDefaultDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Installation */}

<ComponentSection>

## Installation

### Barrel

```tsx
import { Tabs } from "@cloudflare/kumo";
```

### Granular

```tsx
import { Tabs } from "@cloudflare/kumo/components/tabs";
```

</ComponentSection>

{/* Usage */}

<ComponentSection>

## Usage

```tsx
import { Tabs } from "@cloudflare/kumo";

export default function Example() {
  return (
    <Tabs
      tabs={[
        { value: "overview", label: "Overview" },
        { value: "settings", label: "Settings" },
      ]}
      selectedValue="overview"
    />
  );
}
```

</ComponentSection>

{/* Examples */}

<ComponentSection>

## Examples

### Variants

#### Segmented (Default)

<p>A pill-shaped indicator slides between tabs on a subtle background.</p>
<ComponentExample demo="TabsSegmentedDemo">
  <TabsSegmentedDemo client:visible />
</ComponentExample>

#### Underline

<p>
  A bottom border with a primary-colored indicator. The active tab has bolder
  text for emphasis.
</p>
<ComponentExample demo="TabsUnderlineDemo">
  <TabsUnderlineDemo client:visible />
</ComponentExample>

### Small Size

<p>
  Use `size="sm"` for a compact tab bar that matches `Input size="sm"` height (h-6.5 / 26px).
  Useful inside toolbars and filter rows.
</p>
<ComponentExample demo="TabsSmDemo">
  <TabsSmDemo client:visible />
</ComponentExample>

### Controlled

<p>Use the `value` and `onValueChange` props for controlled state.</p>
<ComponentExample demo="TabsControlledDemo">
  <TabsControlledDemo client:visible />
</ComponentExample>

### Many Tabs

<p>Tabs automatically scroll horizontally when there are many items.</p>
<ComponentExample demo="TabsManyDemo">
  <TabsManyDemo client:visible />
</ComponentExample>

</ComponentSection>

{/* API Reference */}

<ComponentSection>

## API Reference

  <PropsTable component="Tabs" />

### TabsItem

<div class="overflow-x-auto">
  <table class="w-full text-sm">
    <thead>
      <tr class="border-b border-kumo-hairline">
        <th class="px-4 py-3 text-left font-semibold">Property</th>
        <th class="px-4 py-3 text-left font-semibold">Type</th>
        <th class="px-4 py-3 text-left font-semibold">Required</th>
      </tr>
    </thead>
    <tbody class="text-kumo-subtle">
      <tr class="border-b border-kumo-hairline">
        <td class="px-4 py-3 font-mono text-xs">value</td>
        <td class="px-4 py-3 font-mono text-xs">string</td>
        <td class="px-4 py-3 font-mono text-xs">Yes</td>
      </tr>
      <tr class="border-b border-kumo-hairline">
        <td class="px-4 py-3 font-mono text-xs">label</td>
        <td class="px-4 py-3 font-mono text-xs">ReactNode</td>
        <td class="px-4 py-3 font-mono text-xs">Yes</td>
      </tr>
      <tr class="border-b border-kumo-hairline">
        <td class="px-4 py-3 font-mono text-xs">className</td>
        <td class="px-4 py-3 font-mono text-xs">string</td>
        <td class="px-4 py-3 font-mono text-xs">No</td>
      </tr>
    </tbody>
  </table>
</div>

</ComponentSection>
