Tabs

uistable

Tabs — extracted 1:1 from WEM-App.

npx shadcn add @krawma/tabs

npm: class-variance-authority@^0.7.1, radix-ui@^1.6.1 · registry: @krawma/utils

Preview

First panel.

Variants

defaultline

States

activedisabledfocus-visible

Keyboard

ArrowLeftArrowRightHomeEnd

Depends on

utils

Purpose

Switch between peer views within the same context, showing one panel at a time. For navigation that changes the URL/page, use links/navigation-menu, not tabs.

Anatomy

Tabs › TabsList (TabsTrigger per tab) › one TabsContent per tab.

Style

variant applies to TabsList (tabsListVariants): default (filled pill list) and line (underline style). Default is default.
Token-backed; the active trigger is emphasized.

Behavior & functionality

Controlled (value + onValueChange) or uncontrolled (defaultValue). Only the active panel is mounted/visible.

Accessibility

Proper tablist/tab/tabpanel roles; roving focus with Left/Right arrows and Home/End; the active tab is a single tab stop.
Each TabsTrigger needs a text label; disabled tabs are skipped in arrow nav.

Do / Don't

✅ Keep tab labels short; use line variant for dense/secondary tab rows.
❌ Don't use tabs for sequential steps — use a stepper/wizard pattern.