A timeline whose line swings down the page as you scroll, lighting each step as it arrives.
Picked
Ripe cherries only, picked by hand in Huila.
Washed and dried
Fermented overnight, then dried on raised beds for three weeks.
Shipped green
Sealed in grain bags and shipped to London by sea.
Roasted on Monday
Small batches, each profile tasted before it ships.
At your door by Friday
Four days from roaster to cup.
import { ScrollPath } from '@brand-studio/ui';
export default function ScrollPathDemo() {
return (
<div style={{ width: '100%', maxWidth: 560, padding: '48px 24px' }}>
<ScrollPath label="From farm to your door" steps={[
{ title: 'Picked', body: <p>Ripe cherries only, picked by hand in Huila.</p> },
{ title: 'Washed and dried', body: <p>Fermented overnight, then dried on raised beds for three weeks.</p> },
{ title: 'Shipped green', body: <p>Sealed in grain bags and shipped to London by sea.</p> },
{ title: 'Roasted on Monday', body: <p>Small batches, each profile tasted before it ships.</p> },
{ title: 'At your door by Friday', body: <p>Four days from roaster to cup.</p> },
]} />
</div>
);
}Installation
pnpm add @brand-studio/uinpm install @brand-studio/uiyarn add @brand-studio/uibun add @brand-studio/uiInstall the peer dependencies
npm install react react-domImport the stylesheet once
import '@brand-studio/ui/styles.css';Wrap your app in a brand theme
import { BrandTheme, ScrollPath } from '@brand-studio/ui'; import brand from './brand.json'; <BrandTheme palette={brand.tokens} mode="system"> {/* your app */} </BrandTheme>
Usage
import { ScrollPath } from '@brand-studio/ui';<ScrollPath label="From farm to your door" steps={[
{ title: 'Picked', body: <p>Ripe cherries only.</p> },
{ title: 'Roasted on Monday', body: <p>Small batches.</p> },
]} />Accessibility
- It is a labelled ordered list of steps, each with a heading.
- Without scripts, and under reduced motion, a straight line is already drawn and every step is at full strength.
API Reference
| Prop | Type | Default |
|---|---|---|
steps | PathStep[] | – |
label? | string | 'Steps' |
className? | string | '' |