Components

Tabs

Switch between panels in place, with an underline or a glowing pill that slides to the active tab. To go to another page, use Pills.

Spending for September.

Import

import { Tabs, TabList, Tab, TabPanel } from '@rinzai/zen';

Examples

Panels

The last panel slides out as the picked one slides in, and the space between eases to fit.

$1,845.11

Spent this month, $210 less than last.

API reference

<Tabs>

Tab set with an underline that slides to the active tab. Controlled (value) or not (defaultValue).

Prop	Type	Default
`defaultValue`	`string`
`onValueChange`	`((value: string) => void)`	`—`
`value`	`string`	`—`

<TabList>

The row of tabs. underline (default): in-page tabs, a bar sliding under the active tab. pills: the Pills look, a glowing pill sliding along a glass track (for navigation between pages, use Pills itself).

Prop	Type	Default
`variant`	`TabListVariant`	`underline`

<Tab>

Prop	Type	Default
`value`Required	`string`	`—`

<TabPanel>

Prop	Type	Default
`value`Required	`string`	`—`