# Fold Tabs

Tabs that fold into an accordion when their container gets narrow, with the track, the active pill and every label carried across so the switch reads as one object changing shape.

- Page and source: https://uibrik.com/components/fold-tabs
- Install: `npx shadcn@latest add https://uibrik.com/r/fold-tabs.json`
- Packages (installed by the CLI): @tabler/icons-react, motion, react-use-measure
- Import: `import { FoldTabs } from "@/components/uibrik/fold-tabs/fold-tabs"`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| mode | `"auto" \| "tabs" \| "accordion"` | `"auto"` | Auto folds to an accordion below the breakpoint. Tabs or Accordion pins one layout. |
| breakpoint | `number` | `480` | Container width below which Auto folds to an accordion. |
| duration | `number` | `0.45` | Length of the fold and of each tab change. |
| radius | `number` | `18` | Corner radius of the track. Rows and the tab pill follow it. |
| items | `{ value: string; label: string; content: ReactNode }[]` |  | Sections, in order. Content renders as the tab panel or the accordion body. |
| value / onValueChange | `string / (value) => void` |  | Controlled active item. Folding and unfolding keep it. |
| defaultValue | `string` | `first item` | Active item on mount when uncontrolled. |
| className | `string` |  | Classes for the wrapper. |