Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Examples

Variant

Size

State

Full Width

State

Disabled

Make changes to your account here. Click save when you're done.

import { Tabs } from 'kalki-design'

<Tabs>Click me</Tabs>

npx kalki-design add tabs

import { Tabs } from 'kalki-design'

export default function Example() {
  return <Tabs />
}

Name	Type	Default	Description
Name`tabs`	Type`TabItem[]`	Default`—`	DescriptionArray of tabs with id, label, disabled status, and optional badge.
Name`activeTab`	Type`string`	Default`—`	DescriptionId of the controlled active tab.
Name`onChange`	Type`(id: string) => void`	Default`—`	DescriptionCallback fired when a tab is clicked.
Name`variant`	Type`'underline' \| 'pills' \| 'bordered'`	Default`'underline'`	DescriptionVisual style of the tabs.
Name`size`	Type`'sm' \| 'md' \| 'lg'`	Default`'md'`	DescriptionSize of the tabs.
Name`fullWidth`	Type`boolean`	Default`false`	DescriptionStretches tabs to fill container width.