BackchannelUI
  1. Docs
  2. components
  3. Tabs

Tabs

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

Arma virumque cano, Troiae qui primus ab oris.

Installation

npx shadcn@latest add https://backchanel.com/default/tabs

Examples

Basic

Arma virumque cano, Troiae qui primus ab oris.

Content

Focus

Dynamic items

Tab body 1

Orientation

There is no prior chat history with John Doe.

Disabled

Mouse Settings

Disabled Items

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.

Mouse settings