# Tabs

Pill or underline tabs with an indicator that glides to the chosen tab. Label colour follows the indicator, and the new panel fades up as the old one fades away.

> Composed · Free · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add tabs
```

## Import

```tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs/tabs";
```

## Variants

- `glass` — Liquid capsule: `npx @lumioui/cli add tabs-glass`
- `line` — Underline: `npx @lumioui/cli add tabs-line`
- `spend` — Spend: `npx @lumioui/cli add tabs-spend`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | Controlled selected value. Omit with defaultValue for uncontrolled use. |
| `defaultValue?` | `string` | Initial value for uncontrolled use. |
| `onValueChange?` | `(value: string) => void` | — |
| `variant?` | `TabsVariant` | Visual variant: "pill" (default, gliding pill) or "line" (underlined list). |
| `glass?` | `boolean` | Glass treatment — pill tabs ride inside a glass capsule and  the gliding indicator is a raised glass pill. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/tabs