Skip to content

Tabs

Panels of content, one visible at a time.

15 g coffee to 250 g water. Bloom for 30 seconds, then pour slowly.

import { Tabs } from '@brand-studio/ui';

export default function TabsDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 440 }}>
      <Tabs
        aria-label="Brew guide"
        items={[
          { value: 'pour', label: 'Pour over', content: <p>15 g coffee to 250 g water. Bloom for 30 seconds, then pour slowly.</p> },
          { value: 'press', label: 'French press', content: <p>30 g coarse coffee to 500 g water. Steep for four minutes.</p> },
          { value: 'cold', label: 'Cold brew', content: <p>100 g coarse coffee to 1 litre of cold water. Rest overnight.</p> },
        ]}
      />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Tabs } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Tabs } from '@brand-studio/ui';

<Tabs
  aria-label="Brew guide"
  items={[
    { value: 'pour', label: 'Pour over', content: <p>…</p> },
    { value: 'press', label: 'French press', content: <p>…</p> },
  ]}
/>

Accessibility

Arrow keys move between tabs, Home and End jump to the ends.
Only the active panel is in the tab order.

API Reference

Prop	Type	Default
`items`	`TabItem[]`	–
`defaultValue?`	`string`	–
`value?`	`string`	–
`onValueChange?`	`((value: string) => void)`	–
`className?`	`string`	`''`
`aria-label?`	`string`	–