A pastel cafe drink list with a drink builder: hot or iced re-tints the illustrated cup, size chips change the price and scale the cup, and milk and extras add to a live total.
Little Fern Coffee · Silver Lake
Single-origin espresso, ceremonial matcha and teas we blend in the back room. Build it the way you like it and pick it up at the bar.
Double shot, wildflower honey, dried lavender
npx shadcn@latest add https://hyperblur.dev/r/menu-drinks-cafe.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-drinks-cafe.tsx.
import { MenuDrinksCafe } from "@/components/hyperblur/menu-drinks-cafe"
<MenuDrinksCafe defaultDrink="matcha" onAdd={(o) => console.log(o.drink.name, o.price)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Little Fern Coffee · Silver Lake" | Small line above the heading. |
| title | string | "Pour me something good." | Heading. The last word is set in the accent color. |
| subtitle | string | "Single-origin espresso, ceremonial matcha ..." | Paragraph under the heading. |
| drinks | MenuDrink[] | 8 drinks in 3 groups | Drinks: { id, name, description, price, group, color, temps?, milk?, tags? }. temps is both, hot or iced; milk false hides the milk options; color tints the drink in the cup. |
| sizes | { id: string; label: string; add: number; note?: string }[] | S 8 oz, M 12 oz +0.75, L 16 oz +1.25 | Size chips and the amount each adds to the base price. |
| milks | { id: string; label: string; add: number }[] | Whole, Oat +0.70, Almond +0.70, Skim | Milk options. |
| extras | { id: string; label: string; add: number }[] | Extra shot, Vanilla syrup, Cold foam, Cinnamon dust | Toggleable extras. |
| defaultDrink | string | "lavender" | Id of the drink selected first. |
| accent | string | "#d96c8a" | Accent color used for highlights, selected states and buttons. |
| onAdd | (order: { drink; temp; size; milk; extras; price }) => void | Called when Add to order is pressed. | |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |