A dine-in QR menu shown inside a phone, next to a scannable-looking table code with a sweeping scan line. Guests filter by category, add dishes and send the order to the kitchen.
Now live at all three locations
Every table at Saffron Lane has its own code. Guests browse the menu on their phone, order when they are ready and pay at the end, without waiting to flag anyone down.
Table 12
Saffron Lane
Whipped feta
Wildflower honey, Aleppo chili, warm pita
Chicken shawarma plate
Garlic toum, pickled turnips, saffron rice
Pistachio knafeh
Warm cheese, orange blossom syrup
npx shadcn@latest add https://hyperblur.dev/r/menu-qr-table.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-qr-table.tsx.
import { MenuQrTable } from "@/components/hyperblur/menu-qr-table"
<MenuQrTable table="Table 7" onSubmit={(o) => console.log(o.total)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Now live at all three locations" | Pill above the heading. |
| title | string | "Scan, order, relax." | Heading. The last word is set in the accent color. |
| subtitle | string | "Every table at Saffron Lane has its own code. ..." | Paragraph under the heading. |
| steps | { title: string; text: string }[] | 3 steps | Numbered steps beside the QR code. |
| restaurant | string | "Saffron Lane" | Name in the phone header. It also seeds the QR pattern. |
| table | string | "Table 12" | Table label on the QR card, the phone header and the order. |
| categories | string[] | ["Popular", ...item categories] | Category chips. Popular shows items tagged popular; other chips match item.category. |
| items | MenuQrItem[] | 11 Mediterranean dishes and drinks | Menu items: { id, name, description, price, category, art?, tags? }. art is one of dip, fries, skewer, plate, steak, stew, knafeh, scoop, lemonade, coffee, tea; tags are vegan, vegetarian, gf, spicy, new, popular. |
| defaultOrder | Record<string, number> | { shawarma: 1, feta: 1 } | Initial quantities by item id. |
| accent | string | "#e8603c" | Accent color used for highlights, selected states and buttons. |
| onSubmit | (order: { table: string; lines: { item; quantity }[]; total: number }) => void | Called when the guest taps Send to kitchen. | |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |