A brunch menu laid out as an open two-page book on cream paper, with line icons, dotted price leaders and a sticky ribbon that totals the dishes you tap and places the order.
Sunday Table · Brunch menu
Saturday and Sunday, 9 am to 3 pm
Free-range eggs from Hollow Creek Farm
Real maple syrup, always
Sourdough baked next door at Rise
Oat or almond milk at no charge
npx shadcn@latest add https://hyperblur.dev/r/menu-brunch-list.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-brunch-list.tsx.
import { MenuBrunchList } from "@/components/hyperblur/menu-brunch-list"
<MenuBrunchList defaultSelected={[]} onSubmit={(items, total) => console.log(items.length, total)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Sunday Table · Brunch menu" | Small line above the heading. |
| title | string | "Brunch, slowly." | Heading. |
| hours | string | "Saturday and Sunday, 9 am to 3 pm" | Serving hours under the heading. |
| pages | [MenuBrunchSection[], MenuBrunchSection[]] | 4 sections over 2 pages | Left and right page. A section is { id, title, note?, icon, items }; an item is { id, name, description, price, icon, tag? }. Icons are egg, pancake, toast, bowl, cup, juice, croissant and waffle. |
| defaultSelected | string[] | ["benedict", "flatwhite"] | Item ids already picked on first render. |
| ctaLabel | string | "Order brunch" | Label of the ribbon button. |
| onSubmit | (items: MenuBrunchItem[], total: number) => void | Called when the order is placed. | |
| accent | string | "#c8553d" | Accent color used for highlights, selected states and buttons. |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |