CmdocsTabs
Organize content into switchable panels.
Tabs
Tabs let you organize content into switchable panels. Define tab labels with the items prop, and use <Tab> with a matching value for each panel.
Basic Tabs
React uses JSX and a virtual DOM for building user interfaces.
function App() {
return <h1>Hello React!</h1>
}Vue uses a template syntax with reactive data binding.
<template>
<h1>Hello Vue!</h1>
</template>Svelte compiles your code at build time for maximum performance.
<h1>Hello Svelte!</h1><Tabs items={["React", "Vue", "Svelte"]}>
<Tab value="React">React content here...</Tab>
<Tab value="Vue">Vue content here...</Tab>
<Tab value="Svelte">Svelte content here...</Tab>
</Tabs>Package Manager Tabs
A common pattern for showing install commands across different package managers:
npm install my-packagebun add my-packagepnpm add my-packageyarn add my-package<Tabs items={["npm", "bun", "pnpm", "yarn"]}>
<Tab value="npm">
```bash
npm install my-package
```
</Tab>
<Tab value="bun">
```bash
bun add my-package
```
</Tab>
<Tab value="pnpm">
```bash
pnpm add my-package
```
</Tab>
<Tab value="yarn">
```bash
yarn add my-package
```
</Tab>
</Tabs>Tabs with Rich Content
Each tab can contain any Markdown content — headings, callouts, code blocks, and even other components.
Create a docs.json file at the root of your docs directory:
{
"name": "My Project",
"navigation": {
"tabs": [
{
"label": "Docs",
"path": "docs",
"groups": [
{
"label": "Getting Started",
"pages": [{ "file": "index" }]
}
]
}
]
}
}The navigation field is required.
Write your pages in MDX format:
---
title: Welcome
description: Getting started with my project.
---
# Welcome
This is your first documentation page.Connect your GitHub repository and deploy automatically on every push.
Props
<Tabs>
Prop
Type
<Tab>
Prop
Type
How is this guide?