---
title: Tab Bar
description: A bottom tab bar for primary navigation.
---
import Source from './_generated/tabbar.mdx';

A bottom tab bar for primary navigation, with a sliding thumb that follows the active tab.

<DemoFrame component="tabbar" />

## Installation

```bash
npx touchcn add tabbar
```

## Usage

<CodeGroup>

```html Angular
<tcn-tabbar>
  <tcn-tab [active]="tab() === 0" (selected)="tab.set(0)">
    <svg tab-icon><!-- … --></svg>
    Home
  </tcn-tab>
  <tcn-tab [active]="tab() === 1" (selected)="tab.set(1)">
    <svg tab-icon><!-- … --></svg>
    Search
  </tcn-tab>
</tcn-tabbar>
```

```tsx React
import { TcnTabbar, TcnTab } from '@/components/ui/tabbar';

<TcnTabbar value={tab}>
  <TcnTab active={tab === 0} onSelect={() => setTab(0)} icon={<HomeIcon />}>
    Home
  </TcnTab>
  <TcnTab active={tab === 1} onSelect={() => setTab(1)} icon={<SearchIcon />}>
    Search
  </TcnTab>
</TcnTabbar>
```

```vue Vue
<script setup lang="ts">
import { TcnTabbar, TcnTab } from '@/components/ui/tabbar';
</script>

<template>
  <TcnTabbar :value="tab">
    <TcnTab :active="tab === 0" @select="tab = 0">
      <template #icon><HomeIcon /></template>
      Home
    </TcnTab>
    <TcnTab :active="tab === 1" @select="tab = 1">
      <template #icon><SearchIcon /></template>
      Search
    </TcnTab>
  </TcnTabbar>
</template>
```

</CodeGroup>

## Props

**`TcnTabbar`**

| Prop    | Type               | Description                                        |
| ------- | ------------------ | -------------------------------------------------- |
| `value` | `string \| number` | Active tab value — repositions the sliding thumb (React). |

**`TcnTab`**

| Prop       | Type        | Default | Description                          |
| ---------- | ----------- | ------- | ------------------------------------ |
| `active`   | `boolean`   | `false` | Whether this tab is selected.        |
| `icon`     | `ReactNode` | —       | Tab icon (Angular: `[tab-icon]` slot). |
| `onSelect` / `selected` | callback | — | Fired when the tab is chosen.        |

<Source />