Skip to content

Key Figures

Big numbers side by side, each under a thin rule with a short lead-in and what it means.

Lens up toƒ/1.4Enough light for a room lit by one lamp.
Shutter up to1/1000sSet by a spring and a gear.
Batteries0Cold and heat change nothing.

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

export default function KeyFiguresDemo() {
  return (
    <KeyFigures
      label="The camera in numbers"
      items={[
        { lead: 'Lens up to', value: 'ƒ/1.4', detail: 'Enough light for a room lit by one lamp.' },
        { lead: 'Shutter up to', value: '1/1000', unit: 's', detail: 'Set by a spring and a gear.' },
        { lead: 'Batteries', value: '0', detail: 'Cold and heat change nothing.' },
      ]}
    />
  );
}

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

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

Usage

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

<KeyFigures items={[{ lead: 'Shutter up to', value: '1/1000', unit: 's', detail: 'Set by a spring and a gear.' }]} />

Use three or four figures. Each number should be true and say something the reader can check.

Accessibility

The figures are a list; pass label to name it.
Each figure reads in order: lead-in, number with its unit, then the meaning.

API Reference

Prop	Type	Default
`items`	`KeyFigure[]`	–
`label?`	`string`	–
`className?`	`string`	–