React Tabs Component

Everything at a glance.

Installation

pnpm add krz-ui

Usage

import { Tabs } from "krz-ui";

<Tabs variant="pills" items={[
  { value: "a", label: "Overview", content: <Overview /> },
  { value: "b", label: "Settings", content: <Settings /> },
]} />

API Reference

Prop	Type	Description
`items`	`TabItem[]`	Tabs with value, label and content.
`value / defaultValue`	`string`	Controlled or initial active tab.
`onValueChange`	`(value: string) => void`	Called when the tab changes.
`variant`	`"underline" \| "pills" \| "enclosed"`	Visual style.
`fullWidth`	`boolean`	Stretch tabs to fill the row.
`className / style / ref`	`—`	All go to the outer element. See Customization.
`classNames`	`{ list?, tab?, icon?, panel? }`	Extra classes for inner parts.