Components

Tabs

Switch between alternate content panes, with optional persistence.

Use Tabs and Tab when readers should choose among alternatives in the same space — languages, platforms, or product modes. For tabbed code only, prefer Code Group.

Basic usage#

Content for JavaScript developers.

<Tabs>
  <Tab title="JavaScript">
    Content for JavaScript developers.
  </Tab>
  <Tab title="Python">
    Content for Python developers.
  </Tab>
</Tabs>

Persist selection with `group`#

Tabs that share a group id restore the last selected tab from localStorage under shiso-tabs:<group>.

<Tabs group="language">
  <Tab title="Node">Node instructions…</Tab>
  <Tab title="Go">Go instructions…</Tab>
</Tabs>

A single Tab child renders as plain content with no tab chrome.

Properties#

Tabs#

Name	Type	Description
group	string	Shared id for persisting the selected tab across tab sets.
children	ReactNode	One or more `Tab` children.

Tab#

Name	Type	Description
title	ReactNode	Tab label. Falls back to `Tab 1`, `Tab 2`, and so on.
children	ReactNode	Panel content.

Last updated on Aug 8, 2026

Steps Tooltip