Tabs

tabsPage structure

Switch between views of the same thing without leaving the page. Arrow keys move between tabs; Tab moves into the panel.

Registry JSON
bunx --bun shadcn@4.17.0 add @waimakers/tabs
Kit dependencies
utilstheme
npm dependencies
@base-ui/react@1.9.0class-variance-authority@0.7.1

From the registry

Tabs uses Base UI, not Radix. The default pill and line variants use brand roles; the active pill carries the control border rather than a shadow. Compose TabsTrigger with a kit Button to preserve button styling. Tabs provides roving focus, manual or automatic activation, wrapping, orientation-aware arrow keys and tab-panel associations.

Examples

Pill

The default pill: the active tab lifts onto the ground with a control border.

Meeting notes ran 42 times this week and filed 18 follow-ups.

Line

The line variant underlines the active tab in the text colour. Use it at the top of a page.

Tamar changed the schedule yesterday at 09:12.

Vertical

Vertical tabs suit settings with many sections; arrow up and down to move.

Name, owner and the calendar this agent listens to.

Disabled

A disabled tab is skipped by the arrow keys and cannot be chosen.

Costs appear after the first billed run.

Focus

The focus ring is the shared text-colour outline.