<Tabs>
Component
Props
Name | Type | Default |
---|---|---|
items | (TabItem | TabObjectItem)[] | |
children | ReactNode | |
storageKey | string LocalStorage key for persisting the selected tab. | |
className | string | ((bag: ListRenderPropArg) => string) Tabs CSS class name. | |
tabClassName | string | ((bag: TabRenderPropArg) => string) Tab CSS class name. | |
defaultIndex | number | |
onChange | (index: number) => void | |
selectedIndex | number |
Example
pnpm
pnpm: Fast, disk space efficient package manager.Usage
Default
import { Tabs } from 'nextra/components'
<Tabs items={['pnpm', 'npm', 'yarn']}>
<Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
<Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
<Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
</Tabs>
Default Selected Index
You can use the defaultIndex
prop to set the default tab index:
import { Tabs } from 'nextra/components'
<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
...
</Tabs>
And you will have npm
as the default tab:
Last updated on