# Tabs

> Underline or pill tabs with an indicator that glides between them.

Component · Free · https://lodeui.com/components/tabs

## When to use

- Switching between sections of the same page or panel.

## When not to use

- Setting a value in a form: use a segmented control.
- Site navigation: use links.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/tabs.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Tabs } from "@/components/ui/tabs";

export function ProjectTabs() {
  const [tab, setTab] = React.useState("overview");
  return (
    <>
      <Tabs aria-label="Project" value={tab} onValueChange={setTab} items={[{ value: "overview", label: "Overview" }, { value: "activity", label: "Activity" }]} />
      {tab === "overview" ? <p>Overview</p> : <p>Activity</p>}
    </>
  );
}
```

## API reference

### Tabs

A tablist with an animated indicator. You render the panel for the active value.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `readonly { value: T; label: ReactNode; disabled?: boolean }[]` | – | The tabs. |
| value / defaultValue / onValueChange | `T` | – | Controlled or uncontrolled. |
| variant | `"underline" \| "pill"` | `"underline"` | Indicator style. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ← / → | Move and select |
| Home / End | First or last tab |

## Accessibility

- role="tablist" with role="tab", aria-selected and roving tabindex.
- Disabled tabs are skipped.

## Motion

- The indicator springs between tabs (bounce 0.15, 400ms).

## Responsive behavior

- Wrap in overflow-x-auto for many tabs on phones.

## Performance

- One animated element.

## Notes for AI

- Give the panel role="tabpanel" if it's a distinct region.

## Related

- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Accordion](https://lodeui.com/components/accordion) — Expandable sections with smooth height and a turning plus.