Tabs
Organize content into tabbed sections
Tabs organize content into switchable panels, perfect for showing alternatives like different package managers or language examples.
Usage
mdx
1<Tabs defaultValue="npm">2 <Tab label="npm">3 npm content here4 </Tab>5 6 <Tab label="yarn">7 yarn content here8 </Tab>9 10 <Tab label="pnpm">11 pnpm content here12 </Tab>13</Tabs>Live Examples
Package Manager Selection
Code Examples
Props
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Tab components |
defaultValue | string | - | Label of initially selected tab (defaults to first tab) |
Tab
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | Tab button label |
children | ReactNode | required | Content shown when tab is active |