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">3npm content here4</Tab>5<!-- -->6<Tab label="yarn">7yarn content here8</Tab>9<!-- -->10<Tab label="pnpm">11pnpm 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 |