A loud street-food burger menu with a category rail, illustrated item cards, quantity steppers and a floating order bar whose total bumps on every add, ending in an order confirmation.
Smash Street · Open till 2 am
Smashed thin, seared hard, stacked tall. Order at the counter or straight from your table.
Two 3 oz patties, American cheese, pickles, house sauce, potato bun.
One 4 oz smash patty, cheddar, shredded lettuce, tomato, white onion.
Crispy buttermilk thigh, chili honey, vinegar slaw, bread-and-butter pickles.
Smashed black bean patty, vegan cheddar, chipotle mayo, charred onion.
npx shadcn@latest add https://hyperblur.dev/r/menu-burger-board.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-burger-board.tsx.
import { MenuBurgerBoard } from "@/components/hyperblur/menu-burger-board"
<MenuBurgerBoard onPlaceOrder={(o) => console.log(o.total)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Smash Street · Open till 2 am" | Line above the heading, with a live dot. |
| title | string | "Loud burgers. Louder fries." | Heading. The last word is set in the accent color. |
| subtitle | string | "Smashed thin, seared hard, ..." | Paragraph beside the heading. |
| categories | { id: string; label: string; note?: string }[] | Burgers, Fries, Shakes, Combos | Tabs of the category rail. |
| items | { id; category; name; description; price: number; art; shade?; tags? }[] | 13 items | Menu items. art is burger, double, chicken, veggie, fries, loaded, shake or combo; tags are popular, spicy, new, vegan or gluten-free. |
| defaultCategory | string | Category shown first. Defaults to the first category. | |
| defaultOrder | Record<string, number> | { "smash-double": 2, "garlic-fries": 1 } | Quantities already in the order on first render, by item id. |
| accent | string | "#ff3b2f" | Accent color used for highlights, selected states and buttons. |
| onPlaceOrder | (order: { lines; count; total }) => void | Called when Place order is pressed. | |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |