Tabs

An accessible tabs component.

The Tab and TabPanel elements are associated by their order in the tree. None of the components are empty wrappers, each is associated with a real DOM element in the document, giving you maximum control over styling and composition.

This component extends

Chakra UI Tabs

import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';

Tabs expects TabList and TabPanels as children. The order doesn't matter, you can have TabList at the top, at the bottom, or both.

<Tabs>
    <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
        <Tab>Three</Tab>
    </TabList>
    <TabPanels>
        <TabPanel>
            <p>one!</p>
        </TabPanel>
        <TabPanel>
            <p>two!</p>
        </TabPanel>
        <TabPanel>
            <p>three!</p>
        </TabPanel>
    </TabPanels>
</Tabs>