Shadcn Tabs
React tabs for settings screens and dashboard views. Built with TypeScript and Tailwind CSS for Next.js using Base UI — one panel at a time, keyboard navigation.
The shadcn tabs component is a row of labels with one panel showing. Click a label — or arrow to it — and that panel replaces the last one. Use it for settings, dashboards, and any screen where the labels should stay in view while the details swap.
Looking for a neobrutalism version for shadcn?
Same tabs, thicker borders. The NeoBrutalism tabs is the kit if you want that look.
Usage
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">Make changes to your account here.</TabsContent>
<TabsContent value="password">Change your password here.</TabsContent>
</Tabs>defaultValue picks the open panel. It has to match a trigger value.
Composition
Line
variant="line" on TabsList. Underline instead of the pill.
Vertical
orientation="vertical" on Tabs. Arrow keys go up and down.
Disabled
disabled on TabsTrigger. It stays in the list so the gap is obvious.
Icons
Drop an icon in the trigger next to the label. Keep the text.
RTL
Wrap with DirectionProvider and dir="rtl". Triggers follow the reading direction.
API
Prop
Type
TabsList
Prop
Type
TabsTrigger
Prop
Type
TabsContent
Prop
Type
TabsList and TabsTrigger take className.
Keyboard
| Key | Action |
|---|---|
ArrowLeft / ArrowRight | Next / previous trigger (horizontal) |
ArrowUp / ArrowDown | Next / previous trigger (vertical) |
Home / End | First / last trigger |
Space / Enter | Activate the focused trigger |
Tab | Move focus into the active panel |
Default activationMode is automatic — arrows also switch the panel.
Notes
Inactive is hidden, not unmounted
Fields in a hidden panel still submit with the form. Only render that TabsContent while its value is selected if they should not post.
Do not use tabs as site navigation. That is a Navigation Menu.
With other components
Frame around a panel
FormSettings in a panel
BadgeCount on a trigger
TooltipName an icon tab
SeparatorSplit dense panel content
InputFields inside the panel
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Table
React table for invoices, orders, and static reports. Built with TypeScript and Tailwind CSS for Next.js using Base UI — caption, header, body, and footer.
Textarea
React textarea for comments, bios, and feedback. Built with TypeScript and Tailwind CSS for Next.js using Base UI — labels, invalid state, and a send button.