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";Tab 1
Tab 2
Tab 3
<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>You can change the variant of the Tabs by passing the variant prop to the Tabs component.
Filled Variant
Tab 1 content
Tab 2 content
Tab 3 content
Underline Variant
Tab 1 content
Tab 2 content
Tab 3 content
Filled-simple Variant
Tab 1 content
Tab 2 content
Tab 3 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>
);
}Add fitted prop, to fit the tabs width to the container.
Tab 1
Tab 2
Tab 3
<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>You can control the selected tab by passing the index and onChange props to the Tabs component.
Current Tab: 3
Tab 1 content
Tab 2 content
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>
</>
);
}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>