# Tabs

Controlled or uncontrolled tabs with a sliding underline that travels between triggers.

- Family: Composites, imported from `mizu-ui` or `mizu-ui/composite`
- Docs: https://mizu.user64bit.world/components/tabs
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/composite/Tabs.tsx

## Usage

```tsx
import { Tabs, TabsList, TabsTrigger, TabsPanel } from "mizu-ui";

export function Switcher() {
  return (
    <Tabs defaultValue="a">
      <TabsList label="Settings">
        <TabsTrigger value="a">General</TabsTrigger>
      </TabsList>
      <TabsPanel value="a">Panel content</TabsPanel>
    </Tabs>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/tabs
```

## Props

- `value / defaultValue`: `string`. Controlled value, or the initial value when uncontrolled.
- `onChange`: `(v: string) => void`. Fires on selection (uncontrolled and controlled).

## Accessibility

Full tab pattern: tablist, tab with aria-selected, tabpanel. Inactive triggers are removed from the tab order.

## Motion

The underline is a layout animation — it slides, it doesn't jump.