Strata
Components / Tabs

Navigation

Tabs

stable

Switch between related panels. Line, segmented and enclosed styles.

since v1.02.6 kB gzip

Preview

Last deploy 4 minutes ago from main@8f2c1a.

Installation

npx @strata/cli add tabs

Usage

import { Tabs, TabList, Tab, TabPanel } from "@/components/strata";

<Tabs variant="segmented">
  <TabList>
    <Tab id="code">Code</Tab>
    <Tab id="preview">Preview</Tab>
  </TabList>
  <TabPanel id="code">…</TabPanel>
</Tabs>

Props

PropTypeDefault
variant

Tab list style.

"line" | "segmented" | "enclosed""line"
orientation

Layout direction.

"horizontal" | "vertical""horizontal"
selectedKey

Controlled active tab.

Key—

Accessibility

Related

Breadcrumbs

Show where the current page sits in the hierarchy.

Was this page helpful?

Documented since v1.0 · components/tabs.mdx