Tabs
Switch between views of the same place, with a marker that slides to the chosen tab.
- INV-1042 · Northwind Traders
- INV-1038 · Stark Logistics
Installation
npx shadcn@latest add @quireui/tabsUsage
<Tabs defaultValue="open">
<TabsList>
<TabsTab value="all">All <TabsCount>24</TabsCount></TabsTab>
<TabsTab value="open">Open <TabsCount>5</TabsCount></TabsTab>
</TabsList>
<TabsPanel value="all">…</TabsPanel>
<TabsPanel value="open">…</TabsPanel>
</Tabs>TabsCount adds a small count after a label, in tabular numbers so it does not jitter while it updates.
When panels hold different amounts of content, give TabsPanel a min-h-* for the tallest one, so switching tabs never moves the page below. The example above does this.
Contained
variant="contained" raises the chosen tab out of a tinted track. Use it for a short set of ranges or modes inside a card or a toolbar, where an underline would get lost.
Vertical
orientation="vertical" puts the list beside the panels, for settings pages and other long sets. Up and down arrows move through it.
Notifications
Which events email you, and how often.
Accessibility
The list is read as tabs, each saying whether it is selected, and each panel is named by its tab. A TabsCount is read as part of its tab's name.
| Key | Action |
|---|---|
| ← / → | Shows the previous or next tab, wrapping at the ends. Up and down when vertical. |
| Home / End | Shows the first or last tab. |
| Tab | From the list, moves into the open panel. |
The chosen tab follows the arrow keys straight away, because panels render instantly. If a panel is slow to load, pass activateOnFocus={false} on TabsList so arrows only move focus and Enter or Space opens the tab.
Motion
The underline, or the raised tab in contained, slides to the chosen tab in 160ms on the library's ease-out curve: quick enough that it has settled before your eye gets there, and enough to show where the selection went. The new panel fades in with a 4px shift from the side you moved towards.
From the keyboard both are instant, so arrowing through tabs never waits on an animation. Reduced motion drops the slide and the shift and keeps the fade.
Tabs or something else?
- Choosing a value for a form, not switching views: Radio group.
- Moving to a different page: links, not tabs.
API reference
Tabs
Prop
Type
Also takes every prop of Base UI's Tabs.Root. Style it with [data-slot="tabs"].
TabsList
Also takes every prop of Base UI's Tabs.List.
TabsTab
Also takes every prop of Base UI's Tabs.Tab. Style it with [data-slot="tabs-tab"].
TabsPanel
Also takes every prop of Base UI's Tabs.Panel. Style it with [data-slot="tabs-panel"].
TabsCount
A count next to a tab label, e.g. how many invoices are overdue.
Also takes every <span> attribute.