Navigation
Tabs
Radix-backed tabbed sections with keyboard-accessible triggers and content panels.
A Radix-backed set of tabbed panels. Tabs manages the active tab; compose it from TabsList (the trigger row), TabsTrigger (one clickable tab) and TabsContent (the panel shown when its tab is active). Full keyboard a11y (arrow keys, Home/End) comes from Radix. Use defaultValue for uncontrolled tabs, or value/onValueChange to control them.
Import
import {
Tabs, TabsList, TabsTrigger, TabsContent,
} from "@yuhuanowo/yunui";
Basic
Tabs
Manage your account details.
Multiple tabs
Three tabs
A snapshot of your workspace.
Disabled tab
Disabled trigger
General preferences.
Parts
| Part | Role |
|---|---|
Tabs | Root; holds value/onValueChange or defaultValue. |
TabsList | Horizontal container for the triggers. |
TabsTrigger | A clickable tab (value required); supports disabled. |
TabsContent | The panel shown when its matching tab is active (value required). |
Tabs re-exports Radix Tabs parts with design-system styling. See the Radix Tabs docs for the complete prop reference, including orientation and activationMode.