Tab Component Examples

This page demonstrates how to use the Tabs component inside documentation.

Basic Usage

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

body {
  font-family: system-ui, sans-serif;
  color: #333;
  background-color: #f9f9f9;
}

h1 {
  color: navy;
}

document.addEventListener('DOMContentLoaded', () => {
  const heading = document.querySelector('h1');
  heading.addEventListener('click', () => {
    alert('Heading clicked!');
  });
});

Package Manager Instructions

Great for showing steps across different tools:

# Install packages
npm install @our-package/core

# Add development dependency
npm install --save-dev @our-package/dev-tools

# Run scripts
npm run dev

# Install packages
yarn add @our-package/core

# Add development dependency
yarn add --dev @our-package/dev-tools

# Run scripts
yarn dev

# Install packages
pnpm add @our-package/core

# Add development dependency
pnpm add -D @our-package/dev-tools

# Run scripts
pnpm dev

Configuration Examples

Compare environments or frameworks:

// development.config.js
export default {
  debug: true,
  apiUrl: 'http://localhost:3000/api',
  database: {
    host: 'localhost',
    port: 5432,
    name: 'myapp_dev'
  },
  logging: {
    level: 'debug',
    console: true
  }
};

// production.config.js
export default {
  debug: false,
  apiUrl: 'https://api.myapp.com',
  database: {
    host: process.env.DB_HOST,
    port: process.env.DB_PORT,
    name: process.env.DB_NAME
  },
  logging: {
    level: 'error',
    console: false,
    file: '/var/log/myapp.log'
  }
};

// test.config.js
export default {
  debug: true,
  apiUrl: 'http://localhost:3001/api',
  database: {
    host: 'localhost',
    port: 5433,
    name: 'myapp_test'
  },
  logging: {
    level: 'warn',
    console: true
  }
};

Language-Specific Examples

Show implementations by language:

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  
  greet() {
    return `Hello, ${this.name}!`;
  }
  
  getProfile() {
    return {
      name: this.name,
      email: this.email
    };
  }
}

const user = new User('Taro Tanaka', 'tanaka@example.com');
console.log(user.greet());

class User:
    def __init__(self, name, email):
        self.name = name
        self.email = email
    
    def greet(self):
        return f"Hello, {self.name}!"
    
    def get_profile(self):
        return {
            'name': self.name,
            'email': self.email
        }

user = User('Taro Tanaka', 'tanaka@example.com')
print(user.greet())

interface IUser {
  name: string;
  email: string;
  greet(): string;
  getProfile(): UserProfile;
}

interface UserProfile {
  name: string;
  email: string;
}

class User implements IUser {
  constructor(
    public name: string,
    public email: string
  ) {}
  
  greet(): string {
    return `Hello, ${this.name}!`;
  }
  
  getProfile(): UserProfile {
    return {
      name: this.name,
      email: this.email
    };
  }
}

const user = new User('Taro Tanaka', 'tanaka@example.com');
console.log(user.greet());

Platform-Specific Steps

Provide OS-specific instructions:

# Verify Node.js installation
node --version
npm --version

# Project setup
mkdir my-project
cd my-project
npm init -y

# Install dependencies
npm install express

# Start the app
npm start

# Install Node.js with Homebrew
brew install node

# Check versions
node --version
npm --version

# Project setup
mkdir my-project
cd my-project
npm init -y

# Install dependencies
npm install express

# Start the app
npm start

# Install Node.js (Ubuntu/Debian)
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# Check versions
node --version
npm --version

# Project setup
mkdir my-project
cd my-project
npm init -y

# Install dependencies
npm install express

# Start the app
npm start

API Response Formats

Display responses in multiple formats:

{
  "status": "success",
  "data": {
    "id": 1,
    "name": "Taro Tanaka",
    "email": "tanaka@example.com",
    "profile": {
      "age": 30,
      "department": "Engineering",
      "position": "Developer"
    },
    "preferences": {
      "language": "ja",
      "theme": "dark",
      "notifications": true
    }
  },
  "meta": {
    "timestamp": "2025-01-27T16:00:00Z",
    "version": "1.0"
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<response>
  <status>success</status>
  <data>
    <id>1</id>
    <name>Taro Tanaka</name>
    <email>tanaka@example.com</email>
    <profile>
      <age>30</age>
      <department>Engineering</department>
      <position>Developer</position>
    </profile>
    <preferences>
      <language>ja</language>
      <theme>dark</theme>
      <notifications>true</notifications>
    </preferences>
  </data>
  <meta>
    <timestamp>2025-01-27T16:00:00Z</timestamp>
    <version>1.0</version>
  </meta>
</response>

status: success
data:
  id: 1
  name: Taro Tanaka
  email: tanaka@example.com
  profile:
    age: 30
    department: Engineering
    position: Developer
  preferences:
    language: ja
    theme: dark
    notifications: true
meta:
  timestamp: "2025-01-27T16:00:00Z"
  version: "1.0"

Technical Details

Props

Tabs

Prop	Type	Default	Description
`children`	ReactNode	—	TabItem components (required)
`defaultValue`	string	First tab	Tab selected by default
`className`	string	—	Additional CSS classes

TabItem

Prop	Type	Default	Description
`label`	string	—	Tab label (required)
`value`	string	`label`	Tab identifier
`children`	ReactNode	—	Content rendered for the tab

Using Tabs in MDX

---
title: "My Document"
---

import { Tabs, TabItem } from '@docs/ui';

# Code Samples

<Tabs>
  <TabItem label="JavaScript">
    {/* JavaScript sample */}
    console.log('Hello, World!');
  </TabItem>
  <TabItem label="Python">
    {/* Python sample */}
    print('Hello, World!')
  </TabItem>
</Tabs>

Best Practices

Organizing Tabs

Logical grouping: Keep related content together
Consistent labels: Use clear, predictable names
Reasonable count: Limit to roughly five to seven tabs

Accessibility

Keyboard navigation: Support arrow keys and Tab navigation
Screen readers: Provide proper ARIA roles and labels
Focus management: Ensure visible focus indicators

Performance

Lazy loading: Load heavy content when needed
Content size: Keep tab contents concise

Next Steps

After mastering Tabs:

Sidebar Generation: Learn how navigation JSON is produced
Customization: Tailor component styles
Automation: Use scripts to keep tab content in sync