Atelier UI

Search components…

Search components…

Tabs

Underline and pill tabs with a sliding indicator and roving-tabindex arrow-key navigation.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

TabsProps

Also accepts all props of Omit<React.ComponentProps<"div">, "defaultValue" | "onChange">

PropTypeDefaultDescription
items* requiredTabItem[]——
variant"underline" | "pill""underline"—
defaultValuestring——
valuestring—Controlled value
onValueChange(value: string) => void——

Install

$ npx shadcn@latest add https://chromotion.dev/r/tabs.json

More like this