The shadcn tabs component is a set of unstyled, accessible tab primitives built on @radix-ui/react-tabs — a package with 10.8M+ weekly npm downloads. It renders a TabsList containing TabsTrigger buttons, each linked to a TabsContent panel by a shared value. Radix handles keyboard navigation, focus management, and ARIA roles automatically, while Tailwind CSS controls every visual detail.
shadcn/ui has passed 116,000+ GitHub stars, and tabs are one of its most-used building blocks - dashboards, settings pages, account panels, and product detail pages all rely on the same four-part structure: Tabs, TabsList, TabsTrigger, and TabsContent. This guide covers how that structure works and shows 12 ready-to-use variations of it.
How do I install shadcn tabs in a Next.js project?
Installing shadcn tabs takes two commands: one to initialize shadcn/ui in your project (skip this if it's already set up), and one to add the tabs component itself. The second command pulls in the Radix UI primitives and generates components/ui/tabs.tsx in your project.
Before running either command, make sure your setup has the basics in place. You need:
- React (v18 or above)
- Next.js (optional but common)
- Tailwind CSS configured
- Radix UI primitives (installed automatically through shadcn/ui)
If shadcn/ui isn't added to your project yet, install it once:
Then add the tabs component:
That's all you need. Once these pieces are in place, the tabs will work exactly as shown in every example that follows.
How do you implement shadcn tabs? The basic structure explained
A working shadcn tabs setup needs four pieces, all imported from @/components/ui/tabs: Tabs (the root component, holding defaultValue or value), TabsList (the row of buttons), TabsTrigger (each button, tied to a value), and TabsContent (the panel shown when its value matches the active tab).
Below is the simplest working example of shadcn ui tabs.
General preferences and profile settings.
What you get:
A clean horizontal tab layout where each section switches instantly. Radix handles the accessibility and keyboard navigation, so you don't configure anything manually.
This structure is the base for all variations you'll see next. Every tab pattern - icons, vertical layouts, counters, animations, or controlled state - builds on this same foundation.
12 shadcn tabs patterns for real projects
Below are 12 shadcn tabs patterns, each with complete, drop-in code: default horizontal tabs, vertical tabs, badges, full-width, icons, controlled state, disabled tabs, animation, nested tabs, card styling, loading states, and mobile-responsive layouts. Some are inspired by open-source shadcn components, and some are built from scratch - each one is small, focused, and ready to paste into a project.
1. Default Horizontal Tabs
This is the classic tabs layout - clean, simple, and usually the first choice for most pages.
Summary and quick info about your data.
Use this pattern when your page has a few sections that need equal weight - dashboards, basic settings, profile pages.
2. Vertical Tabs
Sometimes horizontal space just isn't enough, especially when tab labels get longer. Vertical shadcn tabs solve that cleanly.
Profile information, basic details, and photo settings.
Use vertical tabs for longer tab labels or pages that behave like a sidebar - settings pages, admin panels, dashboards.
🗂️ Building a dashboard or settings page? Vertical tabs work especially well in those layouts. Check out our shadcn templates and several are already structured with sidebar-style navigation built in.
3. Shadcn Tabs with Badges / Counters
Useful when you want to highlight unread items, pending tasks, or anything that needs quick attention.
Messages, notifications, and new updates.
Use badge tabs whenever the number beside a tab has meaning - inboxes, task managers, notification centers, moderation panels.
4. Full-Width Shadcn Tabs
When you want each tab to stretch and fill the entire row, full-width tabs create a balanced, app-like look.
Product info, specifications, and descriptions.
Use full-width tabs for product pages, mobile screens, or any layout where tabs should feel evenly distributed.
🎨 Tabs feel off-brand? It might be a theming issue rather than a layout one. Try the Shadcn Theme Generator to fine-tune colors, radius, and typography before writing any custom CSS.
5. Tabs with Icons
If your UI leans more visual or you want quicker scanning, adding icons to the tab triggers improves visual scanning significantly.
Your main dashboard overview.
Use icon tabs when the tabs represent actions or features that users visually recognize - dashboards, mobile UIs, sidebar replacements.
6. Controlled Tabs (With State Management)
This pattern gives you control over the active tab through React state. Use it when the tab needs to update based on user actions, API responses, or URL changes.
User profile information and preferences.
Use controlled tabs when tab changes need to trigger logic - form resets, fetching data, updating URL params, syncing with other UI components.
📖 Controlled tabs often pair well with controlled dropdowns. If you're managing state across both, our Shadcn Select Component guide covers the same pattern applied to select menus, worth a read before you wire things together.
7. Tabs with Disabled States
Sometimes a tab shouldn't be clickable yet - maybe the feature isn't ready, data is still loading, or access is restricted. Disable individual triggers with a single prop.
High-level information and quick insights.
Use disabled tabs when a tab represents a feature or section that isn't available yet - onboarding flows, analytics pages, role-based access, or locked sections.
8. Animated Tabs
If you want the tabs to feel a bit more dynamic, add a smooth motion effect to the active indicator. This uses a simple Tailwind transition - no external animation library needed.
Account details and personal information.
Use animated tabs when your UI feels too static and tab switching needs to feel smoother.
🚀 Like polished UI details? Our free shadcn templates already have subtle animations and transitions baked in, a solid starting point instead of building from zero.
9. Nested Tabs
Nested tabs make sense when you have grouped content inside another group. Think "Account → Billing → Invoices". Avoid nesting more than two levels deep.
Basic account information and preferences.
Use nested tabs when a section naturally has sub-sections - billing inside settings, modules inside a course, categories inside dashboards.
10. Card-Style Tabs
This variation blends tabs with a card container, which works well for forms, onboarding steps, and settings pages where the content should feel grouped.
Metrics, graphs, and quick insights.
Use card-style tabs when your content belongs inside a card or panel - forms, advanced settings, configuration pages.
💬 Building a chat or messaging UI? Card-style tabs are a natural fit for that layout. The Shadcn Chat UI guide walks through layout patterns that complement this style well.
11. Tabs with Loading States
When switching tabs triggers a data fetch, a blank panel can feel like the UI froze. Showing a quick loading state inside the tab content keeps things feeling responsive while new data loads in.
Active tasks and ongoing work.
Use loading-state tabs whenever switching tabs kicks off an API call - dashboards, reports, or any panel where data takes a moment to load.
12. Mobile-Responsive Tabs
On smaller screens, horizontal tabs can get squeezed. A responsive pattern helps the tabs stay usable without breaking the layout.
Your personalized feed and updates.
Use responsive tabs for any UI that needs to work well on mobile - social feeds, product pages, dashboards, or profile tabs.
📐 Responsive tabs are just one piece of a mobile-friendly layout. If you need the full picture, including resizable panels and collapsible sidebars, the Shadcn Resizable Sidebar guide is a natural next step.
Which shadcn tabs pattern should you use? A decision guide
Match the pattern to the layout, not the other way around. The table below maps each of the 12 patterns to its best-fit use case and the situation where you should reach for a different one instead.
| Pattern | Best for | Avoid when |
|---|---|---|
| 1. Default Horizontal Tabs | Dashboards and settings with equal-weight sections | Tab labels are long and won't fit on one row |
| 2. Vertical Tabs | Sidebar-style settings and admin panels | Narrow mobile screens with limited width |
| 3. Tabs with Badges | Inboxes, task lists, and notification centers | The count has no meaning to the user |
| 4. Full-Width Tabs | Product pages and mobile, evenly distributed layouts | Tab labels are long and get cramped |
| 5. Tabs with Icons | Visual dashboards and mobile UIs needing quick scanning | Tabs need detailed, descriptive text labels |
| 6. Controlled Tabs | Tab changes that sync URL params, fetch data, or reset forms | Static content with no side effects |
| 7. Disabled Tabs | Locked features, onboarding gates, role-based access | Every tab should always stay reachable |
| 8. Animated Tabs | Polished UIs that benefit from subtle motion | Low-power devices where extra motion hurts performance |
| 9. Nested Tabs | Sub-sections inside a section, like Billing → Invoices | Content is flat with no natural hierarchy |
| 10. Card-Style Tabs | Forms, onboarding steps, configuration pages | Dense UIs where extra borders add clutter |
| 11. Tabs with Loading States | Tab switches that trigger an API call | Content is already available locally and switches instantly |
| 12. Mobile-Responsive Tabs | Social feeds and product pages viewed on small screens | Desktop-only dashboards with ample horizontal space |
Are shadcn tabs accessible? Keyboard and ARIA behaviour explained
Yes - shadcn tabs are accessible without extra work. Radix UI's tabs primitive applies role="tablist", role="tab", and role="tabpanel" automatically, sets aria-selected on the active trigger, and links each trigger to its panel with aria-controls. Arrow keys move focus between tabs, Home and End jump to the first and last tab, and Enter or Space activates the focused tab.
This behaviour follows the WAI-ARIA Tabs Pattern and ships from @radix-ui/react-tabs, one of more than 30 accessible primitives in Radix UI and a package used in 10.8M+ npm installs every week. None of the 12 patterns above need extra ARIA attributes or custom keyboard handlers - the accessibility layer is built in.
Summary: shadcn tabs in 60 seconds
shadcn tabs are built on @radix-ui/react-tabs and install with npx shadcn@latest add tabs. Every implementation uses the same four pieces - Tabs, TabsList, TabsTrigger, and TabsContent - and Radix handles keyboard navigation, focus management, and ARIA roles for free. From there, the 12 patterns above cover the layouts most projects need: vertical and full-width tabs, badges, icons, controlled and disabled state, animation, nesting, card styling, loading states, and mobile-responsive behaviour.
Use the examples as a toolbox. Pick what fits your UI, adjust the styling, and continue building. That's the whole point of shadcn components: predictable structure, complete control over the UI.
Related Posts
Explore more shadcn component guides:
- Shadcn Accordion Component Guide - Learn how to build collapsible sections with multiple variations
- Shadcn Select Component Guide - Build custom dropdowns with search, multi-select, and more
- Shadcn Resizable Sidebar Guide - Create resizable layouts for dashboards and applications
- Shadcn Avatar Component Guide - Display user avatars with fallbacks, groups, and status indicators
