> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Tab

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

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

#### First tab

☝️ Welcome to the content that you can only see inside the first tab.

#### Second tab

✌️ Here's content that's only inside the second tab.

#### Third tab

💪 Here's content that's only inside the third tab.

**`Markdown`**

```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.

#### TypeScript

```typescript
console.log("First code block!");
```

#### Python

```python
print("First code block!")
```

#### Java

```java
System.out.println("First code block!");
```

#### TypeScript

```typescript
console.log("Second code block – language syncs with the one above!");
```

#### Python

```python
print("Second code block – language syncs with the one above!")
```

#### Java

```java
System.out.println("Second code block – language syncs with the one above!");
```

#### 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>
````

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

#### Tabs without the language property

Tabs without the `language` property don't synchronize with other tabs on your site.

#### TypeScript

```typescript
console.log("First code block!");
```

#### Python

```python
print("First code block!")
```

#### Java

```java
System.out.println("First code block!");
```

#### TypeScript

```typescript
console.log("Second code block – this won't sync with the one above!");
```

#### Python

```python
print("Second code block – this won't sync with the one above!")
```

#### Java

```java
System.out.println("Second code block – this won't sync with the one above!");
```

#### 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>
````

#### Linking to language-specific content

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.

## Properties

**`title`** `string` — required

The title displayed in the tab header

---

**`language`** `string`

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.

---

**`children`** `string | JSX` — required

The content to be displayed when the tab is selected. Can include text, markdown, and components.

---

**`id`** `string`

The unique ID for the tab. Used for linking and navigation. If not specified, an ID will be generated automatically.

---

**`className`** `string`

Additional CSS classes to apply to the tab

---

### `<TabGroup>` properties

**`className`** `string`

Additional CSS classes to apply to the tab group

---

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