Tabs Component

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

Example

JavaScript

hi.js


import { useState, useEffect } from 'react';

C++

hi.cpp


#include <iostream>

undefined

hi.c


#include <stdio.h>

Python

hello.py


print('Hello, world!')

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