Skip to content

Magnet Tabs

Pill tabs whose highlight slides toward the pointer.

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

export default function MagnetTabsDemo() {
  return (
    <MagnetTabs
      aria-label="Shop sections"
      items={[
        { value: 'coffee', label: 'Coffee' },
        { value: 'equipment', label: 'Equipment' },
        { value: 'subscriptions', label: 'Subscriptions' },
        { value: 'gifts', label: 'Gifts' },
      ]}
    />
  );
}

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, MagnetTabs } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<MagnetTabs
  aria-label="Shop sections"
  items={[{ value: 'coffee', label: 'Coffee' }, { value: 'gifts', label: 'Gifts' }]}
/>

Examples

With panels

Give items content to render tab panels below.

One bag every four weeks. Pause any time.

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

export default function MagnetTabsPanels() {
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <MagnetTabs
        aria-label="Plan"
        items={[
          { value: 'monthly', label: 'Monthly', content: <p>One bag every four weeks. Pause any time.</p> },
          { value: 'fortnightly', label: 'Fortnightly', content: <p>One bag every two weeks, with free delivery.</p> },
          { value: 'weekly', label: 'Weekly', content: <p>For offices and big households.</p> },
        ]}
      />
    </div>
  );
}

Accessibility

Uses the tabs pattern: arrow keys move between tabs, Home and End jump to the ends.
The hover highlight is decorative; the selected tab is marked with aria-selected.

API Reference

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