---
title: Tabs
description: Learn how to display content within different tabs
---

Use the `<Tabs />` component to display content within different tabs.

## Example

<Tabs>
  <TabItem label="First Tab" value="first">👋 This is the content for the first tab.</TabItem>
  <TabItem label="Second Tab" value="second">...and this is the content for the second tab!</TabItem>
</Tabs>

To display tabs, provide the `<Tabs>` component with child `<TabItem />` components:

```jsx
<Tabs>
  <TabItem label="First Tab" value="first">👋 This is the content for the first tab.</TabItem>
  <TabItem label="Second Tab" value="second">...and this is the content for the second tab!</TabItem>
</Tabs>
```

## `Tabs` Props

<Property name="defaultValue" type="string" optional>
  The default tab to display. Needs to match a `TabItem`'s `value` prop.
  
  Defaults to the first tab.
</Property>

## `TabItem` Props

<Property name="label" type="string" required>
  The label to display for the tab.
</Property>

---

<Property name="value" type="string" required>
  The value of the tab. Use this to identify the tab for the `defaultValue` property.
</Property>

## Synchronizing Tabs

To synchronize the tabs across documentation, provide a unique `groupId` prop. Any tabs
displayed across the documentation with this `groupId` will be synchronized. This state
also persists across page reloads.

This is useful if you display content within tabs in multiple places with the same headings
(e.g. examples of code snippets in different languages). If the user chooses a language, they
don't have to keep selecting it everywhere.

```jsx
<Tabs
  groupId="language"
>
```

### Example

The below examples shows how to perform a network request to our API.

First, import the package:

<Tabs groupId="language">
  <TabItem label="JavaScript" value="js">
    Import the `axios` package:

    ```bash
    npm i --save axios
    ```

    Now import it in your code:

    ```js
    import axios from 'axios';
    ```

  </TabItem>
  <TabItem label="Dart" value="dart">
    Add the `dio` package:

    ```bash
    flutter pub add dio
    ```

    Now import it in your code:

    ```dart
    import 'package:dio/dio.dart';
    ```

  </TabItem>
</Tabs>

Next, perform a network request to 'https://example.com':

<Tabs groupId="language">
  <TabItem label="JavaScript" value="js">
    ```js
    const response = await axios.get('https://example.com');
    console.log(response.data);
    ```
  </TabItem>
  <TabItem label="Dart" value="dart">
    ```dart
    var dio = Dio();
    final response = await dio.get('https://example.com');
    print(response.data);
    ```
  </TabItem>
</Tabs>