Tabs
The Tabs component set is a collection of accessible, themeable, and responsive components to create a tabbed interface. The components include Tabs, TabList, TabPanel, TabPanels and Tab.
Import
import { Tabs, TabList, Tab, TabPanelList, TabPanel } from "@recastui/react";Usage
<div className="container mx-auto p-6"><Tabs><TabList><Tab>Tab 1</Tab><Tab>Tab 2</Tab><Tab>Tab 3</Tab></TabList><TabPanels className="p-2"><TabPanel>Content for Tab 1</TabPanel><TabPanel>Content for Tab 2</TabPanel><TabPanel>Content for Tab 3</TabPanel></TabPanels></Tabs></div>
Orientation
Use the orientation prop to change the visual style of the Tabs. You can set the value to ‘horizontal’ or ‘vertical’. Default is ‘horizontal’.
<div className="container mx-auto p-6"><Tabs orientation="vertical"><TabList><Tab>Tab 1</Tab><Tab>Tab 2</Tab><Tab>Tab 3</Tab></TabList><TabPanels className="p-2"><TabPanel>Content for Tab 1</TabPanel><TabPanel>Content for Tab 2</TabPanel><TabPanel>Content for Tab 3</TabPanel></TabPanels></Tabs></div>
Variant
Use the variant prop to change the variant style of the Tab component. You can set the value to ‘underline’, ‘outline’ or ‘pills’. Default is ‘underline’.
<div className="container mx-auto p-6"><Tabs variant="outline"><TabList><Tab>Tab 1</Tab><Tab>Tab 2</Tab><Tab>Tab 3</Tab></TabList><TabPanels className="p-2"><TabPanel>Content for Tab 1</TabPanel><TabPanel>Content for Tab 2</TabPanel><TabPanel>Content for Tab 3</TabPanel></TabPanels></Tabs></div>
Rounded
Use the rounded prop to add rounded corners for the Tab component. There are 5 rounded options: none, sm, md, lg, full. Default is none
<div className="container mx-auto p-6"><Tabs variant="pills" rounded="full"><TabList><Tab>Tab 1</Tab><Tab>Tab 2</Tab><Tab>Tab 3</Tab></TabList><TabPanels className="p-2"><TabPanel>Content for Tab 1</TabPanel><TabPanel>Content for Tab 2</TabPanel><TabPanel>Content for Tab 3</TabPanel></TabPanels></Tabs></div>
Props
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The child components to be rendered within the Tabs. | |
| defaultIndex | number | 0 | The initial active tab index. |
| orientation | ‘vertical’ | ‘horizontal’ | ‘horizontal’ |
| variant | ‘underline’|‘outline’|‘pills’ | ‘outline’ | Tabs orientation layout. |
| rounded | ‘none’|‘sm’|‘md’ | ‘lg’|‘full’ | ‘none’ |
| onTabChange | (index: number) => void | Callback function to be invoked when the active tab is changed. |
TabList
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | ” | Custom className for the tab. |
| children | React.ReactNode | The Tab components to be rendered. |
Tab
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | ” | Custom className for the tab. |
| children | React.ReactNode | The content of the tab. | |
| disabled | boolean | Disable the Tab from being selected. |
TabPanels
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | ” | Custom className for the tab. |
| children | React.ReactNode | The TabPanel components to be rendered. |
TabPanel
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | ” | Custom className for the tab panel. |
| children | React.ReactNode | The content of the tab panel. |
Accessibility
The Tabs components are built with accessibility in mind, following the WAI-ARIA standards for tab components. The components include keyboard navigation, proper focus management, and the required ARIA roles and attributes.
Keyboard Navigation
The Tabs components support the following keyboard interactions:
ArrowRight or ArrowDown: Moves focus to the next tab. If the focus is on the last tab, it moves the focus to the first tab.
ArrowLeft or ArrowUp: Moves focus to the previous tab. If the focus is on the first tab, it moves the focus to the last tab.
Theming
The Tabs components use CVA variants and Tailwind CSS for theming. You can customize the appearance of the components by modifying the className prop or adding custom styles to your project.