---
title: Tabs
slug: docs/_sJ4-tabs
docTags: 
createdAt: 2026-06-05T14:35:37.593Z
---

[Tabs](docId:4lK3iqUD5wfhH7fLtKXOf) organize related content into switchable panels. They are useful for presenting examples in multiple programming languages, frameworks, operating systems, or alternative workflows without increasing page length.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::Tabs
::::Tab{title="Tab Name"}
Content here.
::::
:::::
```
:::

:::Tab{title="MDX"}
```javascript
<Tabs>
  <Tab title="Tab Name">
    Content here.
  </Tab>
</Tabs>
```
:::
::::

Each `Tab` element requires a `title` property, which is displayed as the tab label. You can place any supported Markdown or MDX content inside a tab, including text, images, tables, code blocks, and other components.

## MDX example

The following example creates three tabs containing equivalent code samples in different programming languages.

````javascript
<Tabs>
  <Tab title="JavaScript">

  ```javascript
  const greeting = 'Hello, world!'
  console.log(greeting)
  ```

  </Tab>
  <Tab title="Python">

  ```python
  greeting = "Hello, world!"
  print(greeting)
  ```

  </Tab>
  <Tab title="Go">

  ```go
  package main

  import "fmt"

  func main() {
      fmt.Println("Hello, world!")
  }
  ```

  </Tab>
</Tabs>
````