shadcn.io is not affiliated with official shadcn/ui
Tabs examples · Standard
Basic Tabs for React
Four horizontal tabs that switch between Overview, Analytics, Reports and Notifications panels.
Four related views share one spot on the page, and only the selected one shows. Tabs holds a TabsList of four TabsTriggers and one TabsContent per trigger. Use it for a dashboard or a settings page where people switch views without leaving the page.
Preview
Installation
FAQ
Which parts does this demo use?
Tabs, a TabsList with four TabsTriggers (Overview, Analytics, Reports and Notifications) and four TabsContent panels. Each panel matches its trigger by the same value.
What selects Overview on first render?
The default value on Tabs is overview, which matches the first trigger. The tabs keep the choice themselves after that.
Pass value instead of defaultValue when something outside the list has to set the tab.
How do keyboard users move between these tabs?
Tab moves focus into the list, the arrow keys move between triggers, and Home and End jump to the first and last.
The arrow keys only move focus, and Enter or Space selects. Set activateOnFocus on TabsList to select on focus.
Do inactive panels stay mounted?
No. Inactive panels unmount, so state inside them resets when the reader comes back. These four panels are static text, so the reset does not show.
Set keepMounted on each TabsContent to keep a panel mounted.
Related
- Tabs with IconsAccount, Billing, Notifications and
- Vertical TabsSettings tabs stacked in a column beside
- Full Width TabsThree tabs that split the full width of
- Scrollable TabsTwelve month tabs in a scroll area, so
- Standard Accordion with ChevronA bordered accordion of three questions
- Standard CardA basic card with a title, a description