A neon combo builder: pick a main, side, drink and size through a stepper while a receipt ticket counts up the combo price and shows the savings against buying each piece alone.
Night Owl Chicken · Combo builder
Four quick picks. The ticket keeps score and the combo always costs less than ordering each piece on its own.
npx shadcn@latest add https://hyperblur.dev/r/menu-combo-builder.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-combo-builder.tsx.
import { MenuComboBuilder } from "@/components/hyperblur/menu-combo-builder"
<MenuComboBuilder onComplete={(c) => console.log(c.price, c.savings)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Night Owl Chicken · Combo builder" | Line above the heading. |
| title | string | "Build your combo, keep the change." | Heading. The last word glows in the accent color. |
| subtitle | string | "Four quick picks. ..." | Paragraph under the heading. |
| steps | { id; label; heading; options: { id; name; description; price: number; art; tone?; scale?; tags? }[] }[] | Main, Side, Drink, Size | Steps and their options. art is tenders, sandwich, wings, bowl, fries, cup, corn, drink or size. |
| defaultSelection | Record<string, string> | { main: "hot-tenders", side: "waffle-fries" } | Options already picked on first render, by step id. |
| defaultStep | number | 2 | Index of the step shown first. |
| discount | number | 0.18 | Combo discount against the separate total. The price is rounded down to 25 cents. |
| venue | string | "Night Owl Chicken" | Name printed on the ticket. |
| accent | string | "#ff4fd8" | Accent color used for highlights, selected states and buttons. |
| onComplete | (combo: { selection; separate; price; savings }) => void | Called when the combo is added on the last step. | |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |