ThemesDocs ThemeTabs

Tabs

A built-in component provided by nextra-theme-docs.

Example

hi.cpp
#include <iostream>

Usage

MDX component

tabs.mdx
<Tabs items={['JavaScript', 'C++', {label:'C', disabled: true}, 'Python']} defaultIndex={1}>
  <Tabs.Tab>
    ```js filename="hi.js"
    import { useState, useEffect } from 'react';
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```cpp filename="hi.cpp"
    #include <iostream>
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```c filename="hi.c"
    #include <stdio.h>
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```python filename="hello.py"
    print('Hello, world!')
    ```
  </Tabs.Tab>
</Tabs>

React Component

tabs.jsx
import { Tabs } from 'nextra/components'
 
const items = ['1', '2', '3', '4']
const defaultIndex = 1
const Component = () => (
  <Tabs items={items} defaultIndex={defaultIndex}>
    <Tabs.Tab>1</Tab>
    <Tabs.Tab>2</Tab>
    <Tabs.Tab>3</Tab>
    <Tabs.Tab>4</Tab>
  </Tabs>
)
export default Component