Tabs
Organize content into tabbed interfaces with optional icons and smooth animated transitions.
Overview
The <Tabs> component creates an interactive tabbed interface with smooth animations and optional icons. Each tab includes a title, optional icon, and supports any MDX content including code blocks, callouts, and other components.
Common use cases:
- Platform-specific installation instructions across different operating systems
- API examples showing multiple programming languages side by side
- Feature documentation with different implementation approaches
- Configuration options for various environments or frameworks
- Version-specific documentation showing differences between releases
<Tabs>
<Tab title="macOS" icon="apple">
Install using Homebrew for the best experience on macOS.
```bash
brew install documentation-ai
```
</Tab>
<Tab title="Windows" icon="monitor">
Download and run the Windows installer from the releases page.
```bash
winget install documentation-ai
```
</Tab>
<Tab title="Linux" icon="terminal">
Use your package manager or download the binary directly.
```bash
sudo apt install documentation-ai
```
</Tab>
</Tabs>
Install using Homebrew for the best experience on macOS.
brew install documentation-ai
Download and run the Windows installer from the releases page.
winget install documentation-ai
Use your package manager or download the binary directly.
sudo apt install documentation-ai
Basic syntax
Use the <Tabs> component as a container with individual <Tab> components for each section:
<Tabs>
<Tab title="JavaScript">
Content for JavaScript tab
</Tab>
<Tab title="Python">
Content for Python tab
</Tab>
</Tabs>
Content for JavaScript tab
Content for Python tab
Tab icons
Add visual context to tabs using Lucide icons for better recognition:
<Tabs>
<Tab title="Overview" icon="book-open">
Get started with the fundamentals of DocumentationAI and learn core concepts.
</Tab>
<Tab title="Installation" icon="download">
Follow step-by-step instructions to install and configure your environment.
</Tab>
<Tab title="Configuration" icon="settings">
Customize your setup with advanced configuration options and best practices.
</Tab>
<Tab title="Deployment" icon="rocket">
Deploy your documentation to production with automated CI/CD workflows.
</Tab>
</Tabs>
Get started with the fundamentals of DocumentationAI and learn core concepts.
Follow step-by-step instructions to install and configure your environment.
Customize your setup with advanced configuration options and best practices.
Deploy your documentation to production with automated CI/CD workflows.
Icon names use the Lucide icon library. Reference the Lucide icon directory for all available options.
Rich content support
Tabs support any MDX content including nested components, callouts, images, and complex layouts:
<Tabs>
<Tab title="Quick Start" icon="zap">
Get up and running in under 5 minutes with our streamlined setup process.
<Callout kind="success">
All dependencies are automatically installed and configured for you.
</Callout>
```bash
npm create documentation-ai@latest
cd my-docs
npm run dev
```
</Tab>
<Tab title="Manual Setup" icon="wrench">
For advanced users who want full control over their configuration.
<Steps>
<Step title="Create project directory" icon="folder">
Set up your project structure and initialize package.json.
</Step>
<Step title="Install dependencies" icon="package">
Add DocumentationAI and required peer dependencies.
</Step>
<Step title="Configure settings" icon="settings">
Create your documentation.json configuration file.
</Step>
</Steps>
<Callout kind="alert">
Manual setup requires Node.js 18 or higher and npm 8 or higher.
</Callout>
</Tab>
<Tab title="Migration" icon="move">
Migrate from existing documentation platforms to DocumentationAI.
Supported migration sources:
- GitBook documentation
- Docusaurus sites
- ReadTheDocs projects
- Custom static sites
<Callout kind="info">
Contact our migration team for assistance with large-scale projects.
</Callout>
</Tab>
</Tabs>
Get up and running in under 5 minutes with our streamlined setup process.
All dependencies are automatically installed and configured for you.
npm create documentation-ai@latest
cd my-docs
npm run dev
For advanced users who want full control over their configuration.
Create project directory
Set up your project structure and initialize package.json.
Install dependencies
Add DocumentationAI and required peer dependencies.
Configure settings
Create your documentation.json configuration file.
Manual setup requires Node.js 18 or higher and npm 8 or higher.
Migrate from existing documentation platforms to DocumentationAI.
Supported migration sources:
- GitBook documentation
- Docusaurus sites
- ReadTheDocs projects
- Custom static sites
Contact our migration team for assistance with large-scale projects.
Platform-specific instructions
Create platform-specific guides that adapt to your users' operating systems:
<Tabs>
<Tab title="npm" icon="package">
```bash
npm install @documentation-ai/sdk
npm install --save-dev @documentation-ai/cli
```
Add scripts to your package.json:
```json
{
"scripts": {
"docs:dev": "doc-ai dev",
"docs:build": "doc-ai build",
"docs:deploy": "doc-ai deploy"
}
}
```
</Tab>
<Tab title="pnpm" icon="package">
```bash
pnpm add @documentation-ai/sdk
pnpm add -D @documentation-ai/cli
```
Add scripts to your package.json:
```json
{
"scripts": {
"docs:dev": "doc-ai dev",
"docs:build": "doc-ai build",
"docs:deploy": "doc-ai deploy"
}
}
```
</Tab>
<Tab title="Yarn" icon="package">
```bash
yarn add @documentation-ai/sdk
yarn add --dev @documentation-ai/cli
```
Add scripts to your package.json:
```json
{
"scripts": {
"docs:dev": "doc-ai dev",
"docs:build": "doc-ai build",
"docs:deploy": "doc-ai deploy"
}
}
```
</Tab>
</Tabs>
npm install @documentation-ai/sdk
npm install --save-dev @documentation-ai/cli
Add scripts to your package.json:
{
"scripts": {
"docs:dev": "doc-ai dev",
"docs:build": "doc-ai build",
"docs:deploy": "doc-ai deploy"
}
}
pnpm add @documentation-ai/sdk
pnpm add -D @documentation-ai/cli
Add scripts to your package.json:
{
"scripts": {
"docs:dev": "doc-ai dev",
"docs:build": "doc-ai build",
"docs:deploy": "doc-ai deploy"
}
}
yarn add @documentation-ai/sdk
yarn add --dev @documentation-ai/cli
Add scripts to your package.json:
{
"scripts": {
"docs:dev": "doc-ai dev",
"docs:build": "doc-ai build",
"docs:deploy": "doc-ai deploy"
}
}
Attributes
Tabs component
The <Tabs> component acts as a container and has no configurable attributes. It automatically manages tab state and animations.
Tab component
The tab label displayed in the navigation bar. This text identifies each tab and should be concise and descriptive.
Optional Lucide icon name to display alongside the tab title. Enhances visual recognition and improves user experience. Reference Lucide icons for available options.
The content displayed when the tab is active. Supports all MDX content including text, code blocks, callouts, images, lists, tables, and other components.
Common patterns
- Multi-language code examples - Display the same functionality implemented across different programming languages, making it easy for developers to find examples in their preferred language.
- Platform installation guides - Provide operating system-specific instructions for Windows, macOS, and Linux users, ensuring everyone can follow the correct setup process.
- Framework integrations - Document how to integrate with various frameworks like React, Vue, Angular, or Svelte in separate tabs for clarity and organization.
- Environment configurations - Show different configuration options for development, staging, and production environments without cluttering a single view.
- API authentication methods - Present multiple authentication approaches such as API keys, OAuth, JWT tokens, or SAML in an organized tabbed interface.
- Package manager instructions - Provide installation commands for npm, yarn, pnpm, and other package managers so users can choose their preferred tool.
- Version migration guides - Compare features and breaking changes between different versions, helping users understand what changed and how to upgrade.
- Feature comparison tables - Display plan tiers, pricing options, or feature availability across different subscription levels in an interactive format.
Tabs include an animated underline indicator that smoothly transitions between selections, providing clear visual feedback to users.