Model Compare

Which kit is right for you?

Body only

Bring your own lens.

$1,080

Buy

Lens: Lens: Not included
Strap: Strap: Not included
Weight: 590 g

Most chosen

50 mm kit

Body, 50 mm lens and strap.

$1,480

Currently viewing

Lens: 50 mm ƒ/1.4
Strap: Leather, 110 cm
Weight: 820 g

35 mm kit

Body, 35 mm lens and strap.

$1,420

Buy

Lens: 35 mm ƒ/2
Strap: Leather, 110 cm
Weight: 760 g

import { ActionLink, ModelCompare } from '@brand-studio/ui';
import { camera } from '@/demos/assets';

const picture = (name: string, alt: string) => {
  const image = camera(name, alt);
  return <img src={image.src} alt={image.alt} width={800} height={800} />;
};
const buy = <ActionLink href="#buy" shape="pill">Buy</ActionLink>;

export default function ModelCompareDemo() {
  return (
    <ModelCompare
      title="Which kit is right for you?"
      models={[
        { name: 'Body only', media: picture('front-square', 'The camera body.'), summary: 'Bring your own lens.', price: '$1,080', action: buy },
        { name: '50 mm kit', media: picture('three-square', 'The camera with a 50 mm lens.'), badge: 'Most chosen', summary: 'Body, 50 mm lens and strap.', price: '$1,480', current: true },
        { name: '35 mm kit', media: picture('side-square', 'The camera with a lens, from the side.'), summary: 'Body, 35 mm lens and strap.', price: '$1,420', action: buy },
      ]}
      rows={[
        { label: 'Lens', values: [null, '50 mm ƒ/1.4', '35 mm ƒ/2'] },
        { label: 'Strap', values: [null, 'Leather, 110 cm', 'Leather, 110 cm'] },
        { label: 'Weight', values: ['590 g', '820 g', '760 g'] },
      ]}
    />
  );
}

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

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

Usage

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

<ModelCompare
  title="Which kit is right for you?"
  models={[{ name: 'Body only', price: '$1,080' }, { name: '50 mm kit', price: '$1,480', current: true }]}
  rows={[{ label: 'Lens', values: [null, '50 mm ƒ/1.4'] }]}
/>

Give values one entry per model, in the same order. Use null for a feature a model lacks. Mark the model on this page with current.

Accessibility

Each model is an article named after the model, with its features in a description list.
A missing feature shows a dash to sight and reads as "Lens: Not included" to a screen reader. Change the words with missingLabel.
On narrow screens the columns scroll sideways inside the component.

API Reference

Prop	Type	Default
`title?`	`React.ReactNode`	–
`models`	`CompareModel[]`	–
`rows`	`CompareRow[]`	–
`currentLabel?`	`string`	–
`missingLabel?`	`string`	–
`className?`	`string`	–