Skip to content

Latest commit

 

History

History
65 lines (51 loc) · 1.3 KB

tabs.mdx

File metadata and controls

65 lines (51 loc) · 1.3 KB
Raw

Tab Component

A built-in tab component of the Docs Theme.

Example

import { Tab, Tabs } from 'nextra-theme-docs'

<Tabs items={['pnpm', 'npm', 'yarn']}> pNPM: Fast, disk space efficient package manager. npm is a package manager for the JavaScript programming language. Yarn is a software packaging system.

Usage

Default

import { Tab, Tabs } from 'nextra-theme-docs'

<Tabs items={['pnpm', 'npm', 'yarn']}>
  <Tab>
    **pNPM**: Fast, disk space efficient package manager.
  </Tab>
  <Tab>
    **npm** is a package manager for the JavaScript programming language.
  </Tab>
  <Tab>
    **Yarn** is a software packaging system.
  </Tab>
</Tabs>

Default Selected Index

You can use the defaultIndex prop to set the default tab index:

import { Tab, Tabs } from 'nextra-theme-docs'

<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
  ...
</Tabs>

And you will have npm as the default tab:

<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1"> pNPM: Fast, disk space efficient package manager. npm is a package manager for the JavaScript programming language. Yarn is a software packaging system.