Installation

Barrel

Granular

Usage

export default function Example() {
  return (
    <Tabs
      tabs={[
        { value: "overview", label: "Overview" },
        { value: "settings", label: "Settings" },
      ]}
      selectedValue="overview"
/>
  );
}

Examples

Variants

Segmented (Default)

A pill-shaped indicator slides between tabs on a subtle background.

Underline

A bottom border with a primary-colored indicator. The active tab has bolder text for emphasis.

Small Size

Use size="sm" for a compact tab bar that matches Input size="sm" height (h-6.5 / 26px). Useful inside toolbars and filter rows.

Controlled

Use the value and onValueChange props for controlled state.

Many Tabs

Tabs automatically scroll horizontally when there are many items.

API Reference

TabsItem