Tabs

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

Usage

Default

Code content goes here.


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

Sortable data table
Prop	Type	Default	Description
tabs	Tab[]	-	Array of tab objects. Each tab includes a `label`, `content`, and optionally `icon` or `disabled`.
defaultIndex	number	0	Index of the tab that is active by default.
onChange	(index: number) => void	-	Callback fired when the active tab changes. Receives the tab index.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme color variant for the tabs.
state	"success" \| "error" \| "warning"	-	Visual state variant for tabs
size	"xs" \| "small" \| "medium" \| "large" \| "xl"	Configured Default	Size of the tabs and their labels.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius for tab buttons.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow style for the tabs container.
className	string	-	Additional class names for the outermost tabs container.
data-testid	string	"tabs"	Test ID for the root element (for testing utilities).