- Docs
- components
- Tabs
Tabs
Tabs organize content into multiple sections and allow users to navigate between them.
Preview
Code
Founding of Rome
Monarchy and Republic
Empire
Arma virumque cano, Troiae qui primus ab oris.
Installation
CLI
Copy & Paste
NPM
PNPM
Bun
Yarn
Examples
Basic
Preview
Code
Founding of Rome
Monarchy and Republic
Empire
Arma virumque cano, Troiae qui primus ab oris.
Content
Focus
Preview
Code
Jane Doe
John Doe
Joe Bloggs
Dynamic items
Preview
Code
Tab 1
Tab 2
Tab 3
Tab body 1
Orientation
Preview
Code
John Doe
Jane Doe
Joe Bloggs
There is no prior chat history with John Doe.
Disabled
Preview
Code
Mouse Settings
Keyboard Settings
Gamepad Settings
Mouse Settings
Disabled Items
Preview
Code
Mouse Settings
Keyboard Settings
Gamepad Settings
Mouse Settings
In dynamic collections, it may be more convenient to use the disabledKeys prop at the Tabs level instead of isDisabled on individual tabs. Each key in this list corresponds with the id prop passed to the Tab component, or automatically derived from the values passed to the items prop (see the Collections for more details). A tab is considered disabled if its id exists in disabledKeys or if it has isDisabled.
Preview
Code
Mouse settings
Keyboard settings
Gamepad settings
Mouse settings