***

title: Tab
description: >-
The Tabs component allows you to display related content in a tabbed view with
support for language synchronization.
-------------------------------------

For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see [https://buildwithfern.com/learn/llms.txt](https://buildwithfern.com/learn/llms.txt). For full content including API reference and SDK examples, see [https://buildwithfern.com/learn/llms-full.txt](https://buildwithfern.com/learn/llms-full.txt).

The `<Tabs>` component organizes content into separate tabs that users can switch between. Each tab can contain different types of content like examples, code snippets, or documentation sections.

## Usage

<div>
  <div>
    <Tabs>
      <Tab title="First tab">
        ☝️ Welcome to the content that you can only see inside the first tab.
      </Tab>

      <Tab title="Second tab">
        ✌️ Here's content that's only inside the second tab.
      </Tab>

      <Tab title="Third tab">
        💪 Here's content that's only inside the third tab.
      </Tab>
    </Tabs>
  </div>
</div>

```jsx Markdown
<Tabs>
  <Tab title="First tab">
    ☝️ Welcome to the content that you can only see inside the first tab.
  </Tab>
  <Tab title="Second tab">
    ✌️ Here's content that's only inside the second tab.
  </Tab>
  <Tab title="Third tab">
    💪 Here's content that's only inside the third tab.
  </Tab>
  </Tabs>
```

## Variants

### Language synchronization

Tabs with the [same language](/learn/docs/writing-content/components/code-blocks#supported-languages) automatically synchronize across your documentation site. When a user selects a language, all tabs with that language switch to match. Language preferences persist across browser sessions.

<div>
  <div>
    <Tabs>
      <Tab title="TypeScript" language="typescript">
        ```typescript
        console.log("First code block!");
        ```
      </Tab>

      <Tab title="Python" language="python">
        ```python
        print("First code block!")
        ```
      </Tab>

      <Tab title="Java" language="java">
        ```java
        System.out.println("First code block!");
        ```
      </Tab>
    </Tabs>

    <Tabs>
      <Tab title="TypeScript" language="typescript">
        ```typescript
        console.log("Second code block – language syncs with the one above!");
        ```
      </Tab>

      <Tab title="Python" language="python">
        ```python
        print("Second code block – language syncs with the one above!")
        ```
      </Tab>

      <Tab title="Java" language="java">
        ```java
        System.out.println("Second code block – language syncs with the one above!");
        ```
      </Tab>
    </Tabs>
  </div>
</div>

<CodeBlock title="Markdown">
  ````jsx
  <Tabs>
    <Tab title="TypeScript" language="typescript">
      ```typescript
      console.log("Content inside the TypeScript tab");
      ```
    </Tab>
    <Tab title="Python" language="python">
      ```python
      print("Content inside the Python tab")
      ```
    </Tab>
    <Tab title="Java" language="java">
      ```java
      System.out.println("Content inside the Java tab");
      ```
    </Tab>
  </Tabs>
  ````
</CodeBlock>

<Info>
  Language-enabled tabs automatically synchronize with [code blocks in that same language](/docs/writing-content/components/code-blocks#language-synchronization).
</Info>

<AccordionGroup>
  <Accordion title="Tabs without the language property" toc={true}>
    Tabs without the `language` property don't synchronize with other tabs on your site.

    <div>
      <div>
        <Tabs>
          <Tab title="TypeScript">
            ```typescript
            console.log("First code block!");
            ```
          </Tab>

          <Tab title="Python">
            ```python
            print("First code block!")
            ```
          </Tab>

          <Tab title="Java">
            ```java
            System.out.println("First code block!");
            ```
          </Tab>
        </Tabs>

        <Tabs>
          <Tab title="TypeScript">
            ```typescript
            console.log("Second code block – this won't sync with the one above!");
            ```
          </Tab>

          <Tab title="Python">
            ```python
            print("Second code block – this won't sync with the one above!")
            ```
          </Tab>

          <Tab title="Java">
            ```java
            System.out.println("Second code block – this won't sync with the one above!");
            ```
          </Tab>
        </Tabs>
      </div>
    </div>

    <CodeBlock title="Markdown">
      ````jsx
      <Tabs>
        <Tab title="TypeScript">
          ```typescript
          console.log("Content inside the TypeScript tab, with no language property");
          ```
        </Tab>
        <Tab title="Python">
          ```python
          print("Content inside the Python tab, with no language property")
          ```
        </Tab>
        <Tab title="Java">
          ```java
          System.out.println("Content inside the Java tab, with no language property");
          ```
        </Tab>
      </Tabs>
      ````
    </CodeBlock>
  </Accordion>

  <Accordion title="Linking to language-specific content">
    For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see [https://buildwithfern.com/learn/llms.txt](https://buildwithfern.com/learn/llms.txt). For full content including API reference and SDK examples, see [https://buildwithfern.com/learn/llms-full.txt](https://buildwithfern.com/learn/llms-full.txt).

    You can link directly to content in a specific language by adding `?language=<some-language>` to the end of a URL. This sets which language tab wil be displayed by default when users visit the page.

    For example, the following link opens with Java tabs displayed: [https://buildwithfern.com/learn/docs/writing-content/components/tabs?language=java](https://buildwithfern.com/learn/docs/writing-content/components/tabs?language=java)

    This works with both `CodeBlocks` and `Tab` components that have a `language` property.
  </Accordion>
</AccordionGroup>

## Properties

<ParamField path="title" type="string" required={true}>
  The title displayed in the tab header
</ParamField>

<ParamField path="language" type="string" required={false}>
  The language associated with the code block. Any arbitrary string may be used.

  When specified, enables global language synchronization across all tabs and code blocks with the same language value.
</ParamField>

<ParamField path="children" type="string | JSX" required={true}>
  The content to be displayed when the tab is selected. Can include text, markdown, and components.
</ParamField>

<ParamField path="id" type="string" required={false}>
  The unique ID for the tab. Used for linking and navigation. If not specified, an ID will be generated automatically.
</ParamField>

<ParamField path="className" type="string" required={false}>
  Additional CSS classes to apply to the tab
</ParamField>

### `<TabGroup>` properties

<ParamField path="className" type="string" required={false}>
  Additional CSS classes to apply to the tab group
</ParamField>