From bean to cup.
Plate I · The bean
Start with the bean.
Small differences become the whole cup. Texture, aroma, and the moment a familiar ritual begins.
Plate II · The pour
Give it a moment.
The first pour. The slow bloom. A little attention changes an everyday drink into something worth pausing for.
Plate III · The cup
Make room for the first sip.
A warm cup. A clear counter. A moment that belongs to you, before the day asks for anything else.
import { HorizontalStory } from '@brand-studio/ui';
import { chapters } from '@/demos/assets';
export default function HorizontalStoryDemo() {
return <HorizontalStory title="From bean to cup." chapters={chapters} />;
}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, HorizontalStory } from '@brand-studio/ui'; import brand from './brand.json'; <BrandTheme palette={brand.tokens} mode="system"> {/* your app */} </BrandTheme>
Usage
import { HorizontalStory } from '@brand-studio/ui';<HorizontalStory title="From bean to cup." chapters={chapters} />Accessibility
- On wide screens with motion allowed, scrolling down moves the chapters sideways.
- On phones and under reduced motion it is a swipeable row you can also scroll with the arrow keys.
API Reference
| Prop | Type | Default |
|---|---|---|
title | string | – |
chapters | StoryChapter[] | – |
className? | string | '' |