Tabs
Switches between related views in the same context.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import {
Tabs,
TabsContent,
TabsIndicator,
TabsList,
TabsTrigger,
} from "@wunderui/react"Examples
Default
A tab that is not selected.
Hover
The muted fill under the pointer.
Active
The selected tab, tinted indigo.
Disabled
Shown but not selectable.
Focus
The focus ring when reached with the keyboard.
8 tabs
A row of 8 tabs — click one to select it.
7 tabs
A row of 7 tabs — click one to select it.
6 tabs
A row of 6 tabs — click one to select it.
5 tabs
A row of 5 tabs — click one to select it.
4 tabs
A row of 4 tabs — click one to select it.
Vertical
Tabs stacked beside their panel, the active one tinted.
Profile
Your name and photo appear on comments, mentions and shared boards.
Vertical line
A rail on the left with the indicator gliding along it.
Overview
WunderUI is a React library for the screens that take the longest: dashboards, data grids, boards and AI chat.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Settings page tabs
Line tabs switch between settings sections.
Filter bar
Tabs with counts over a table — picking a tab swaps the rows underneath.
| Task | Owner | Status |
|---|---|---|
| Audit tokens | Alina Lorenz | |
| Migrate icons | Jonas Weber | |
| Ship dark mode | Mira Chen | |
| Rewrite empty states | Alina Lorenz |
Tab Bar in context
A team page: tabs with counts over members, pending invitations and roles; resend an invitation from its row.
| Invitee | Role | Status | Invited | Actions |
|---|---|---|---|---|
| JAJamesjames@wunderui.com | Admin | 2 days ago | ||
| MAMayamaya@wunderui.com | Member | 2 days ago | ||
| LULucaslucas@partner.io | Guest | 14 days ago | ||
| AIAishaaisha@wunderui.com | Member | 1 hour ago |