Components

Tabs

The indicator flows like liquid: its leading edge races ahead, the trailing edge catches up, and it settles with a wobble.

Paste it into ChatGPT, Claude, Cursor or v0.

Usage

React

import { Tabs } from '@vizzele/react';

<Tabs
  label="Billing"
  items={[
    { value: 'monthly', label: 'Monthly', content: <Monthly /> },
    { value: 'yearly', label: 'Yearly', content: <Yearly /> },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`TabItem[]`	—	{ value, label, content?, disabled? }
`value / defaultValue / onValueChange`	`string`	—	Controlled or uncontrolled.
`variant`	`'pill' \| 'underline'`	`'pill'`	Indicator style.
`label`	`string`	—	Accessible name for the tab list.

Usage

Props

Accessibility