---
title: Tabs
description: Content tabs with a sliding indicator and panel switching.
---
import Source from './_generated/tabs.mdx';

Content tabs switch between related views within the same screen (distinct from the bottom Tabbar). Material renders primary tabs with a sliding underline indicator; iOS renders a segmented control with a sliding thumb.

<DemoFrame component="tabs" height={420} />

## Installation

```bash
npx touchcn add tabs
```

## Usage

<CodeGroup>

```html Angular
<tcn-tabs [(value)]="tab">
  <tcn-tab-panel value="overview" label="Overview">…</tcn-tab-panel>
  <tcn-tab-panel value="details" label="Details">…</tcn-tab-panel>
</tcn-tabs>
```

```tsx React
import { TcnTabs, TcnTabsList, TcnTab, TcnTabPanel } from '@/components/ui/tabs';

<TcnTabs value={tab} onValueChange={setTab}>
  <TcnTabsList>
    <TcnTab value="overview">Overview</TcnTab>
    <TcnTab value="details">Details</TcnTab>
  </TcnTabsList>
  <TcnTabPanel value="overview">…</TcnTabPanel>
  <TcnTabPanel value="details">…</TcnTabPanel>
</TcnTabs>
```

```vue Vue
<script setup lang="ts">
import { TcnTabs, TcnTabsList, TcnTab, TcnTabPanel } from '@/components/ui/tabs';
</script>

<template>
  <TcnTabs v-model="tab">
    <TcnTabsList>
      <TcnTab value="overview">Overview</TcnTab>
      <TcnTab value="details">Details</TcnTab>
    </TcnTabsList>
    <TcnTabPanel value="overview">…</TcnTabPanel>
    <TcnTabPanel value="details">…</TcnTabPanel>
  </TcnTabs>
</template>
```

</CodeGroup>

## Props

| Prop            | Type                      | Default | Description                             |
| --------------- | ------------------------- | ------- | --------------------------------------- |
| `value`         | `string`                  | —       | Active tab value (two-way on Angular).  |
| `onValueChange` | `(value: string) => void` | —       | Active-tab callback (React).            |
| `label`         | `string`                  | `''`    | Tab label (Angular `tcn-tab-panel`).    |

<Source />