We buy from twelve farms
Direct relationships, visited every harvest.

We roast on Tuesdays
Small batches, shipped within two days.

You brew it your way
Guides for every method, from moka pot to cold brew.

import { ScrollStack } from '@brand-studio/ui';
import { beans, cup, pour } from '@/demos/assets';
export default function ScrollStackDemo() {
return (
<div style={{ width: '100%' }}>
<ScrollStack
cards={[
{ id: 'source', title: 'We buy from twelve farms', body: 'Direct relationships, visited every harvest.', asset: beans },
{ id: 'roast', title: 'We roast on Tuesdays', body: 'Small batches, shipped within two days.', asset: pour },
{ id: 'brew', title: 'You brew it your way', body: 'Guides for every method, from moka pot to cold brew.', asset: cup },
]}
/>
</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, ScrollStack } from '@brand-studio/ui'; import brand from './brand.json'; <BrandTheme palette={brand.tokens} mode="system"> {/* your app */} </BrandTheme>
Usage
import { ScrollStack } from '@brand-studio/ui';<ScrollStack cards={cards} />Accessibility
- Cards are an ordered list with sticky positioning, so they read in order without JavaScript.
- Under reduced motion the covered cards do not shrink.
API Reference
| Prop | Type | Default |
|---|---|---|
cards | StackCard[] | – |
className? | string | '' |