@docubook/create/src/dist/docs/components/tabs.mdx

CLI to create DocuBook projects

---
title: Tabs
description: Organize content into multiple sections with switchable tabs.
date: 14-12-2024
---

The `Tabs` component allows you to organize content into multiple sections, enabling users to switch between them easily. This is particularly useful for displaying related content in a compact manner.

## Preview

<Tabs defaultValue="java" className="pt-5 pb-1">
  <TabsList>
    <TabsTrigger value="java">Java</TabsTrigger>
    <TabsTrigger value="typescript">TypeScript</TabsTrigger>
  </TabsList>
  <TabsContent value="java">
    ```java:HelloWorld.java
    // HelloWorld.java
    public class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </TabsContent>
  <TabsContent value="typescript">
    ```typescript:helloWorld.ts
    // helloWorld.ts
    function helloWorld(): void {
        console.log("Hello, World!");
    }
    helloWorld();
    ```
  </TabsContent>
</Tabs>

## Props

| Prop           | Type     | Default | Description                                            |
| -------------- | -------- | ------- | ------------------------------------------------------ |
| `defaultValue` | string   | null    | The value of the tab that is selected by default.      |
| `className`    | string   | null    | Additional CSS classes for styling the Tabs component. |

## Output Markdown

````plaintext
<Tabs defaultValue="java" className="pt-5 pb-1">
  <TabsList>
    <TabsTrigger value="java">Java</TabsTrigger>
    <TabsTrigger value="typescript">TypeScript</TabsTrigger>
  </TabsList>
  <TabsContent value="java">
    ```java:HelloWorld.java
    // HelloWorld.java
    public class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </TabsContent>
  <TabsContent value="typescript">
    ```typescript:helloWorld.ts
    // helloWorld.ts
    function helloWorld(): void {
        console.log("Hello, World!");
    }
    helloWorld();
    ```
  </TabsContent>
</Tabs>
````