Tabs
A set of layered sections of content — known as tab panels — displayed one at a time.
Installation
pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/tabs.jsonDefault
variant="default" — centered, equal spacing.
Content for account tab.
Line
variant="line" — left-aligned, minimal underline indicator.
Content for account tab.
Default + Scrollable
scrollable — overflow becomes horizontal scroll instead of wrapping.
Content for Account tab.
Line + Scrollable
variant="line" scrollable — underline style with horizontal scroll.
Content for Account tab.
Default + Scrollable + Snap
scrollable snap — each tab locks into place while scrolling.
Content for Account tab.
Line + Scrollable + Snap
variant="line" scrollable snap
Content for Account tab.
Default + Scrollable + Snap + FadeEdges
scrollable snap fadeEdges — gradient fades reveal hidden tabs on either side.
Content for Account tab.
Line + Scrollable + Snap + FadeEdges
variant="line" scrollable snap fadeEdges — full production config.
Content for Account tab.
Vertical — Default
orientation="vertical" — tabs stack on the side.
Content for account tab.
Vertical — Line
orientation="vertical" variant="line"
Content for account tab.
TabsList Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "line" | "default" | Visual style variant |
scrollable | boolean | false | Enable horizontal scrolling |
snap | boolean | false | Enable scroll snapping |
fadeEdges | boolean | false | Show gradient fade on edges when scrollable |
className | string | — | Additional CSS classes |
Tabs Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | Initially active tab |
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction |
className | string | — | Additional CSS classes |