A delivery ordering page with a searchable menu, category tabs and a cart panel with quantity steppers, a free delivery meter, tip chips, a live total and a checkout confirmation.
Bao, hand-pulled noodles and rice bowls from Grand Street
Crispy pork belly bao
Hoisin glaze, cucumber, crushed peanuts, cilantro
$6.50Fried chicken bao
Gochujang mayo, sesame slaw, pickled jalapeño
$6.00Tofu katsu bao
Miso glaze, pickled carrot, shiso
$5.50Dan dan noodles
Pork mince, chili oil, sesame paste, bok choy
$14.50Garlic butter udon
Shiitake, scallion, soft egg yolk, nori
$13.00Tonkotsu ramen
18-hour pork broth, chashu, marinated egg
$16.50Bulgogi rice bowl
Grilled beef, kimchi, fried egg, sesame rice
$15.50Salmon poke
Avocado, edamame, ponzu, crispy shallots
$16.00Pork and chive dumplings
Six pieces, black vinegar, chili crisp
$8.50Smashed cucumber salad
Garlic, black vinegar, toasted sesame
$5.50Furikake fries
Seaweed salt, kewpie mayo on the side
$5.00Yuzu lemonade
Fresh yuzu, cane sugar, sparkling water
$4.50
npx shadcn@latest add https://hyperblur.dev/r/menu-delivery-order.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-delivery-order.tsx.
import { MenuDeliveryOrder } from "@/components/hyperblur/menu-delivery-order"
<MenuDeliveryOrder onCheckout={(o) => console.log(o.total)} />| Prop | Type | Default | Description |
|---|---|---|---|
| restaurant | string | "Lucky Bao" | Restaurant name. Its initials fill the logo. |
| tagline | string | "Bao, hand-pulled noodles and rice bowls ..." | Line under the name. |
| rating | string | "4.9 (2.1k)" | Rating pill. |
| eta | string | "20 to 30 min" | Delivery time shown in the header and the confirmation. |
| address | string | "418 Grand St, Apt 3B, Brooklyn" | Delivery address in the cart. |
| items | MenuDeliveryItem[] | 12 dishes in 5 categories | Menu items: { id, name, description, price, category, art?, tags? }. art is one of bao, noodles, ramen, rice, poke, dumplings, salad, fries, drink. |
| categories | string[] | categories in item order | Tabs after All. |
| defaultCart | Record<string, number> | { dandan: 1, porkbao: 2 } | Initial quantities by item id. |
| deliveryFee | number | 2.99 | Delivery fee in dollars. |
| freeDeliveryOver | number | 35 | Subtotal that makes delivery free. |
| tipOptions | number[] | [0, 10, 15, 20] | Tip percentages. 0 shows None. |
| defaultTip | number | 15 | Tip selected first. |
| accent | string | "#ff5a36" | Accent color used for highlights, selected states and buttons. |
| onCheckout | (order: { lines; subtotal; deliveryFee; tip; total }) => void | Called when Checkout is pressed. | |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |