Tabs
Tabs with a pill that glides under the active label.
Behaviour
- Reduced motion: the pill moves instantly.
- A pill glides under the active label on one spring, and picking another tab mid-glide carries on from where it is.
- Arrow keys, Home and End move between tabs, with one tab stop (roving tabindex).
- It renders the tab bar only: show your own panel for the selected value.
- A long list scrolls inside its own rounded bar rather than breaking the page.
Props
| Prop | Type | Description |
|---|---|---|
| tabs | string[] | The tab labels, in order. Each label is also its value, so keep them unique. |
| value | string | Controlled value. Leave it out and the tabs keep their own state. |
| defaultValue | string | Starting tab when uncontrolled. Defaults to the first. |
| onValueChange | (value: string) => void | Called when another tab is picked. |
| label | stringdefault "Tabs" | Accessible name for the tab list. |
| className | string | Size comes from here, e.g. text-lg. |
Installation
npx shadcn@latest add https://purrfectui.com/r/tabs.jsonHow to use
import { Tabs } from "@/components/ui/tabs";
const [tab, setTab] = useState("Preview");
<Tabs tabs={["Preview", "Code", "Docs"]} value={tab} onValueChange={setTab} />
{tab === "Code" ? <Source /> : <Preview />}Source code
Loading…
License
MIT. Copy it into your project and change it as you like.