Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

Source

View source code

Issues

Report an issue

Package

@rootui/tabs

Reference

React Aria docs

Preview

Tab 1

Tab 2

Tab 3

Content 1

orientation

keyboardActivation

isDisabled

1<Tabs>
2  <Tabs.List>
3    <Tabs.Tab id="tab1">
4      Tab 1
5    </Tabs.Tab>
6    <Tabs.Tab id="tab2">
7      Tab 2
8    </Tabs.Tab>
9    <Tabs.Tab id="tab3">
10      Tab 3
11    </Tabs.Tab>
12  </Tabs.List>
13  <Tabs.Contents>
14    <Tabs.Content id="tab1">
15      Content 1
16    </Tabs.Content>
17    <Tabs.Content id="tab2">
18      Content 2
19    </Tabs.Content>
20    <Tabs.Content id="tab3">
21      Content 3
22    </Tabs.Content>
23  </Tabs.Contents>
24</Tabs>

Anatomy

1<Tabs>
2  <Tabs.List>
3    <Tabs.Tab></Tabs.Tab>
4  </Tabs.List>
5  <Tabs.Contents>
6    <Tabs.Content></Tabs.Content>
7  </Tabs.Contents>
8</Tabs>

Installation

Package

Shadcn CLI

Manual

Note

Please ensure your local environment is fully configured as instructed in the getting started guide.

npm

yarn

pnpm

bun

npm install @rootui/tabs

Usage

1import { Tabs } from "@rootui/tabs";
2
3export default function Page() {
4  return (
5    <Tabs>
6      <Tabs.List>
7        <Tabs.Tab id="tab1">
8          Tab 1
9        </Tabs.Tab>
10        <Tabs.Tab id="tab2">
11          Tab 2
12        </Tabs.Tab>
13      </Tabs.List>
14      <Tabs.Contents>
15        <Tabs.Content id="tab1">
16          Content 1
17        </Tabs.Content>
18        <Tabs.Content id="tab2">
19          Content 2
20        </Tabs.Content>
21      </Tabs.Contents>
22    </Tabs>
23  )
24}

API Reference

See the React Aria documentation for more information.

Tabs

Prop	Type	Default
`isDisabled`	`Boolean`	`false`
Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.
`keyboardActivation`	`'automatic' \| 'manual'`	`'manual'`
Whether tabs are activated automatically on focus or manually.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
The orientation of the tabs..
`selectedKey`	`Key \| null`	`-`
The currently selected key in the collection (controlled).
`defaultSelectedKey`	`Key`	`-`
The initial selected key in the collection (uncontrolled).
`onSelectionChange`	`(key: Key) => void`	`-`
Handler that is called when the selection changes.
`disabledKeys`	`Iterable<Key>`	`-`
The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

Attribute	Description
`data-orientation="horizontal \| vertical"`	The orientation of the tabs.

Tabs.List

Prop	Type	Default
`children`	`ReactNode \| (item: T) => ReactNode`	`-`
The contents of the collection.

Attribute	Description
`data-orientation="horizontal \| vertical"`	The orientation of the tab list.

Tabs.Tab

Prop	Type	Default
`id`	`Key`	`-`
The unique id of the tab.
`isDisabled`	`Boolean`	`false`
Whether the tab is disabled.

Attribute	Description
`data-hovered`	Whether the tab is currently hovered with a mouse.
`data-pressed`	Whether the tab is currently in a pressed state.
`data-selected`	Whether the tab is currently selected.
`data-focused`	Whether the tab is currently focused.
`data-focus-visible`	Whether the tab is currently keyboard focused.
`data-disabled`	Whether the tab is disabled.

Tabs.Contents

Prop	Type	Default
`children`	`ReactNode \| (item: T) => ReactNode`	`-`
The contents of the collection.

CSS variable	Description
`--tab-panel-width`	The width of the active tab panel in pixels. Useful for animations.
`--tab-panel-height`	The height of the active tab panel in pixels. Useful for animations.

Tabs.Content

Prop	Type	Default
`shouldForceMount`	`Boolean`	`false`
Whether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually.
`id`	`Key`	`-`
The unique id of the tab.

Attribute	Description
`data-focused`	Whether the tab panel is currently focused.
`data-focus-visible`	Whether the tab panel is currently keyboard focused.
`data-inert`	Whether the tab panel is currently non-interactive. This occurs when the shouldForceMount prop is true, and the corresponding tab is not selected.
`data-entering`	Whether the tab panel is currently entering. Use this to apply animations.
`data-exiting`	Whether the tab panel is currently exiting. Use this to apply animations.