Tabs

Controlled or uncontrolled tabs with a sliding underline that travels between triggers.

Live — this one is real

Tokens are CSS custom properties scoped to --mizu-* namespaces. One stylesheet defines the surface; every component inherits it. Re-theming is an override, not a fork.

Usage

import { Tabs, TabsList, TabsTrigger, TabsPanel } from "mizu-ui";

export function Switcher() {
  return (
    <Tabs defaultValue="a">
      <TabsList label="Settings">
        <TabsTrigger value="a">General</TabsTrigger>
      </TabsList>
      <TabsPanel value="a">Panel content</TabsPanel>
    </Tabs>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect composite/Tabs.tsx

Source is included in the npm package under src/composite/Tabs.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
value / defaultValue	string	—	Controlled value, or the initial value when uncontrolled.
onChange	(v: string) => void	—	Fires on selection (uncontrolled and controlled).

Accessibility

Full tab pattern: tablist, tab with aria-selected, tabpanel. Inactive triggers are removed from the tab order.

Motion

The underline is a layout animation — it slides, it doesn't jump.

Works alongside

Accordion Dialog Nav