Tabs - Dreamy UI

Tabs

Tabs can be used to display information in a structured way.

#

Import

Tabs - The main container for the Tabs.
TabList - The list for the Tabs.
Tab - The tab for the Tabs.
TabPanels - The panels for the Tabs.
TabPanel - The panel for the Tabs.

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

#

Usage

Tab 1

<Tabs>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>Tab 1</p>
    </TabPanel>
    <TabPanel>
      <p>Tab 2</p>
    </TabPanel>
    <TabPanel>
      <p>Tab 3</p>
    </TabPanel>
  </TabPanels>
</Tabs>

#

Variant

You can change the variant of the Tabs by passing the variant prop to the Tabs component.

Filled Variant

Tab 1 content

Underline Variant

Tab 1 content

Filled-simple Variant

Tab 1 content

function TabsVariants() {
    return (
        <VStack gap={6}>
            <Flex
                col
                gap={2}
            >
                {(["filled", "underline", "filled-simple"] as const).map((variant) => (
                    <React.Fragment key={variant}>
                        <Text bold>{capitalize(variant)} Variant</Text>
                        <Tabs variant={variant}>
                            <TabList>
                                <Tab>Tab 1</Tab>
                                <Tab>Tab 2</Tab>
                                <Tab>Tab 3</Tab>
                            </TabList>
                            <TabPanels>
                                <TabPanel>
                                    <p>Tab 1 content</p>
                                </TabPanel>
                                <TabPanel>
                                    <p>Tab 2 content</p>
                                </TabPanel>
                                <TabPanel>
                                    <p>Tab 3 content</p>
                                </TabPanel>
                            </TabPanels>
                        </Tabs>
                    </React.Fragment>
                ))}
            </Flex>
        </VStack>
    );
}

#

Fit Width

Add fitted prop, to fit the tabs width to the container.

Tab 1

<Tabs fitted>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>Tab 1</p>
    </TabPanel>
    <TabPanel>
      <p>Tab 2</p>
    </TabPanel>
    <TabPanel>
      <p>Tab 3</p>
    </TabPanel>
  </TabPanels>
</Tabs>

#

Controlled

You can control the selected tab by passing the index and onChange props to the Tabs component.

Current Tab: 3

Tab 3 content

function ControlledTabs() {
    const [index, setIndex] = useState(2);
 
    return (
        <>
            <Text bold>Current Tab: {index + 1}</Text>
 
            <Tabs
                index={index}
                onChange={setIndex}
            >
                <TabList>
                    <Tab>Tab 1</Tab>
                    <Tab>Tab 2</Tab>
                    <Tab>Tab 3</Tab>
                </TabList>
                <TabPanels>
                    <TabPanel>
                        <p>Tab 1 content</p>
                    </TabPanel>
                    <TabPanel>
                        <p>Tab 2 content</p>
                    </TabPanel>
                    <TabPanel>
                        <p>Tab 3 content</p>
                    </TabPanel>
                </TabPanels>
            </Tabs>
        </>
    );
}

#

Lazy mount panel

You can lazy mount the panel by passing the isLazy prop to the Tabs component. This will only render the active tab panel, instead of switching the visibility of all panels.

Tab 1

<Tabs isLazy>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <p>Tab 1</p>
    </TabPanel>
    <TabPanel>
      <p>Tab 2</p>
    </TabPanel>
    <TabPanel>
      <p>Tab 3</p>
    </TabPanel>
  </TabPanels>
</Tabs>

#

Overflow

Add overflowX="scroll" to the TabList if your tabs are overflowing the container.

<Box maxW="xs" w='xs' >
  <Tabs>
    <TabList overflowX="scroll">
      <Tab>Tab 1</Tab>
      <Tab>Tab 2</Tab>
      <Tab>Tab 3</Tab>
      <Tab>Tab 4</Tab>
      <Tab>Tab 5</Tab>
      <Tab>Tab 6</Tab>
      <Tab>Tab 7</Tab>
    </TabList>
    <TabPanels>
      <TabPanel>1</TabPanel>
      <TabPanel>2</TabPanel>
      <TabPanel>3</TabPanel>
      <TabPanel>4</TabPanel>
      <TabPanel>5</TabPanel>
      <TabPanel>6</TabPanel>
      <TabPanel>7</TabPanel>
    </TabPanels>
  </Tabs>
</Box>

Table

Text