Tabs
.mdSegmented tabs in pill, volt and underline styles; a shared spring indicator glides to the active tab and resizes to fit it.
tabssegmented controltogglenavigationlayout animation
Installation
$npx shadcn@latest add @geturui/tabs
Usage
usage.tsx
1import * as React from "react";
2import { Tabs } from "@/components/ui/tabs";
3
4export function BillingToggle() {
5 const [period, setPeriod] = React.useState("monthly");
6 return (
7 <Tabs
8 aria-label="Billing period"
9 variant="volt"
10 value={period}
11 onValueChange={setPeriod}
12 items={[
13 { value: "monthly", label: "Monthly" },
14 { value: "yearly", label: "Yearly" },
15 ]}
16 />
17 );
18}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | { value: string; label: ReactNode; icon?: ReactNode }[] | — | Tabs in order. |
value | string | — | Active tab when controlled. |
defaultValue | string | items[0].value | Initial tab when uncontrolled. |
onValueChange | (value: string) => void | — | Called when a tab is chosen by click or keyboard. |
variant | "pill" | "volt" | "underline" | "pill" | Pill for view switches, volt for billing toggles, underline for doc sections. |
size | "sm" | "md" | "md" | Tab height (pill and volt only). |
aria-label | string | — | Names the tab list for screen readers. |
className | string | — | Classes for the tab list. |
Accessibility
- Uses role="tablist" and role="tab" with aria-selected and a roving tabindex, so Tab moves into and out of the group in one stop.
- Arrow Left/Right move and select (wrapping), Home and End jump to the ends.
- Panels are yours to render: give them role="tabpanel" and a label that matches the active tab.