Tabs
tabsSwitches between labeled content panels with underline or solid indicators.
Usage
Basic usage
TabsList installs TabsTab, and each TabsPanel corresponds to value; defaultValue sets the initial selection page.
<Tabs defaultValue="account" className="w-80">
<TabsList>
<TabsTab value="account">Account</TabsTab>
<TabsTab value="password">Password</TabsTab>
</TabsList>
<TabsPanel value="account">Manage your account information and preferences. </TabsPanel>
<TabsPanel value="password">Change the login password here. </TabsPanel>
</Tabs>Segmented Pill Skin
TabsList Add variant="solid" to switch to segmented pill track, and the selected state will slide smoothly by the slider.
<Tabs defaultValue="account" className="w-80">
<TabsList variant="solid">
<TabsTab value="account">Account</TabsTab>
<TabsTab value="password">Password</TabsTab>
<TabsTab value="team">Team</TabsTab>
</TabsList>
<TabsPanel value="account">Account panel. </TabsPanel>
<TabsPanel value="password">Password panel. </TabsPanel>
<TabsPanel value="team">Team Panel. </TabsPanel>
</Tabs>Disable a page
Add disabled to TabsTab. This page cannot be clicked or keyboard focused, and other pages can be switched normally.
<Tabs defaultValue="a" className="w-80">
<TabsList>
<TabsTab value="a">Available</TabsTab>
<TabsTab value="b" disabled>Disable</TabsTab>
<TabsTab value="c">Available</TabsTab>
</TabsList>
<TabsPanel value="a">First panel. </TabsPanel>
<TabsPanel value="b">Unreachable. </TabsPanel>
<TabsPanel value="c">Third panel. </TabsPanel>
</Tabs>Vertical arrangement
Tabs Add orientation="vertical", tab lines are arranged vertically, and the direction keys switch up and down.
<Tabs defaultValue="general" orientation="vertical" className="flex w-96 gap-4">
<TabsList className="flex-col items-stretch border-b-0 border-r border-border">
<TabsTab value="general">General</TabsTab>
<TabsTab value="security">Safety</TabsTab>
<TabsTab value="billing">Bill</TabsTab>
</TabsList>
<div className="flex-1">
<TabsPanel value="general">General settings. </TabsPanel>
<TabsPanel value="security">Security settings. </TabsPanel>
<TabsPanel value="billing">Bill settings. </TabsPanel>
</div>
</Tabs>When to use
Use Tabs to switch among peer content panels such as Account, Password, and Team within one region. Panels are mutually exclusive and have no hierarchy. Use Breadcrumb to show a page's place in the site, Anchor for a long-form table of contents that tracks reading progress, or Stepper for an ordered workflow.
Import
import { Tabs, TabsList, TabsTab, TabsPanel, tabsListVariants } from "@hulianui/ui"Props
Tabs forwards Base UI Tabs.Root props including value, defaultValue, onValueChange, and orientation, and is uncontrolled by default. Visual variants belong on TabsList.
Tabs (root)
| Name | Type | Default | Description |
|---|---|---|---|
| value | any | — | Controlled active tab value. |
| defaultValue | any | — | Initially active tab when uncontrolled. |
| orientation | "horizontal" | "vertical" | "horizontal" | Tab-list orientation. |
TabsList
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "underline" | "solid" | "underline" | Underline slider or solid pill styling. |
| className | string | — | Additional class name. |
TabsTab accepts required value, plus disabled and className; TabsPanel accepts value and className.
Events
Tabs (root)
| Event | Type | Description |
|---|---|---|
| onValueChange | (value) => void | Called when the active value changes; forwarded to Base UI Tabs.Root. |
Example
<Tabs defaultValue="account" className="w-80">
<TabsList variant="underline">
<TabsTab value="account">Account</TabsTab>
<TabsTab value="password">Password</TabsTab>
<TabsTab value="team" disabled>Team</TabsTab>
</TabsList>
<TabsPanel value="account">Manage your profile and preferences.</TabsPanel>
<TabsPanel value="password">Change your sign-in password.</TabsPanel>
<TabsPanel value="team">Invite members and assign roles.</TabsPanel>
</Tabs>Usage guidelines
- [[base-ui-tabs-indicator-slider-via-active-tab-css-vars]]: the slider uses
--active-tab-*variables written by Base UI on the indicator and a CSS transition, with no animation library. The active hook isdata-active, notdata-selected; using the wrong attribute leaves the style inactive. jsdom tests can run without ResizeObserver, although they do not render the indicator's actual geometry.
Related
Breadcrumb · Pagination · Anchor · Affix · BackTop · Stepper
Playground
<Tabs defaultValue="account">
<TabsList variant="underline">
<TabsTab value="account">Account</TabsTab>
<TabsTab value="password">Password</TabsTab>
</TabsList>
<TabsPanel value="account">…</TabsPanel>
<TabsPanel value="password">…</TabsPanel>
</Tabs>