Tabs

The Tabs component provides a simple way to switch between multiple sections of related content using a tabbed interface.

Usage & Examples

Default

default.tsx


const [activeTab, setActiveTab] = useState(0);
const tabs = [
  { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
  { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
  { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
];

<Tabs
  tabs={tabs}
  defaultIndex={activeTab}
  onChange={setActiveTab}
  theme="primary"
  size="medium"
/>

Props API

Tabs props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	Accessible description id for the tablist.
`aria-label`	`string`	No	aria	`"Tabs"`	Accessible name for the tablist.
`aria-labelledby`	`string`	No	aria	`—`	Accessible labelledby id for the tablist. Preferred over aria-label when provided.
`aria-live`	`"off" \| "polite" \| "assertive"`	No	aria	`—`	Optional aria-live setting if tab changes should be announced by a related region.
`className`	`string`	No	styling	`—`	Custom class names to apply to the tabs container.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`defaultIndex`	`number`	No	props	`0`	Uncontrolled initial index.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Adds translucent glass styling to the tab controls.
`idBase`	`string`	No	props	`—`	Optional stable base used to create ids: `${idBase}-tab-${i}` and `${idBase}-panel-${i}`
`onChange`	`((index: number) => void)`	No	events	`—`	Callback when the active tab changes.
`rounding`	`RoundingType`	No	styling	`configured default rounding (fallback: "medium")`	Rounding of the tabs. "none" \| "small" \| "medium" \| "large" \| "full"
`shadow`	`ShadowType`	No	styling	`configured default shadow (fallback: "light")`	Shadow style of the tabs. "none" \| "light" \| "medium" \| "strong" \| "intense"