Question 1

What is a shadcn tabs component?

Accepted Answer

Tabs show one of several related panels in the same place: a row of triggers, and the panel for the selected one below it. shadcn.io's Tabs is built on Base UI, React Aria, Ark UI or Radix UI in React, and on Ark UI in Vue, Svelte and Solid. Each gives the tab list the WAI-ARIA tabs roles and keyboard support, styled with Tailwind CSS. Every example here is one small file showing one pattern.

Question 2

Are these tabs examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account.

Question 3

Tabs, Accordion or separate pages: which one?

Accepted Answer

Tabs when people switch often between views and only one matters at a time, such as settings sections. An Accordion when several sections can be open at once, such as an FAQ. Separate pages when each view deserves its own URL, for sharing, search or the back button.

Question 4

Should the selected tab be in the URL?

Accepted Answer

When people would share or bookmark a specific tab, yes: read the tab from a search parameter and control the tabs with it, as the Controlled Tabs example controls them from state. For in-page switching nobody links to, the tabs can keep their own state.

Question 5

How do I build vertical tabs?

Accepted Answer

Set the orientation to vertical on Tabs, as the Vertical Tabs example does. The list stacks beside the panel, the triggers align to the start, and Up and Down move between them. On a narrow screen, switch back to horizontal or a scrollable list.

Question 6

How do I add badges or counts to tab triggers?

Accepted Answer

Put a Badge inside the trigger after its label; the trigger's gap spaces it. The Tabs with Badge Counts example shows inbox counts. Keep counts for tabs whose number actually helps people choose.

Question 7

How do I make tabs scroll when there are too many?

Accepted Answer

Wrap the tab list in a ScrollArea with whitespace-nowrap, so the triggers stay on one line and scroll sideways. The Scrollable Tabs example does this with twelve months.

Question 8

How do I install a tabs example?

Accepted Answer

Sign in, open the example, and run the install command under Installation. The CLI adds the example to your project along with the Tabs component and anything else it uses, for the framework and library you picked.

Question 9

Do inactive panels stay mounted?

Accepted Answer

No. By default only the selected panel is rendered, so state inside the others resets when you come back. Each example's FAQ names the prop that keeps panels mounted on your library, for forms or anything else that should survive a switch.

Question 10

How do I control the selected tab?

Accepted Answer

Pass the selected value and a change handler to Tabs, as the Controlled Tabs example does with its Previous and Next buttons. The prop names differ by library; that example's FAQ lists them.

Question 11

Which libraries do tabs examples depend on?

Accepted Answer

shadcn.io's Tabs (built on Base UI, React Aria, Ark UI or Radix UI in React, and Ark UI in Vue, Svelte and Solid), Tailwind CSS, and Lucide icons where an example shows them. Some examples also use Badge, Button, Field, Input, ScrollArea or Table.

Question 12

Are the tabs accessible for keyboard and screen reader users?

Accepted Answer

Yes. The list has the tablist role, each trigger the tab role with its selected state, and each panel the tabpanel role linked to its trigger. The arrow keys move between triggers, and Home and End jump to the first and last.

Question 13

Can I use these tabs examples with React Server Components?

Accepted Answer

Tabs is a client component, since it keeps the selected tab and handles keys. Render it inside a server-rendered page; the panels' content can come from the server as props or children.

Tabs Examples

Controlled Tabs

Nested Tabs

Tabs with Badge Counts

Tabs with Cards

Tabs with Forms

Tabs with Tables

Full Width Tabs

Scrollable Tabs

Vertical Tabs

Basic Tabs

Tabs with Icons

More component examples

Breadcrumb

Command

Menubar

Navigation Menu

Pagination

Textarea

Toggle

Toggle Group

Tabs examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every tabs example. One prompt away.