Tabs

A tabbed navigation component for organizing content into multiple panels with switchable views.

npx chilli@latest add tabs

Small

Medium

Large

Prop	Type	Default	Description
`items`	`{ label: string; value: string; icon?: ReactNode; rightIcon?: ReactNode }[]`	`—`	Array of tab items to display.
`value`	`string`	`—`	Controlled active tab value.
`onValueChange`	`(value: string) => void`	`—`	Callback when the active tab changes.
`type`	`"underline" \| "pill" \| "segmented"`	`"underline"`	Visual style of the tabs.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the tab items.