Tabs

Switch between related panels.

Installation

import { Tabs } from "~/components/ui/Tabs";

Usage

Proactive monitoring keeps systems healthy.
<Tabs
  items={[
    { value: "overview", label: "Overview", content: <p>...</p> },
    { value: "pricing", label: "Pricing", content: <p>...</p> },
  ]}
/>

API reference

PropTypeDefaultDescription
items{ value, label, content }[]-The tabs to render.
defaultValuestringitems[0].valueInitially selected tab.

Accessibility

  • Built on the Base UI Tabs primitive: arrow-key navigation and correct tab/panel ARIA wiring.
  • The selected tab is exposed via data-selected for styling.
View site