Tabs
2 min
Tabs 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="Tab Name"}
Content here.
::::
:::::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.
<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>Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.