A warm paper pizzeria menu where a size toggle and a crust select reprice every pizza live, while a spinning illustrated pizza grows with the chosen size.
Forno Benno · Wood-fired since 2009
Dough rested for two days, baked at 850° in ninety seconds. Choose a size and a crust, the whole menu updates.
San Marzano tomato, fior di latte, torn basil, Sicilian olive oil.
Cup-and-char pepperoni, low-moisture mozzarella, oregano.
Spicy soppressata, Calabrian chili, smoked mozzarella, chili oil.
Garlic cream, roasted cremini, fontina, thyme, lemon zest.
Basil pesto, zucchini ribbons, blistered tomatoes, cashew mozzarella.
Fennel sausage, pickled peppers, whipped ricotta, hot honey.
npx shadcn@latest add https://hyperblur.dev/r/menu-pizza-sizes.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-pizza-sizes.tsx.
import { MenuPizzaSizes } from "@/components/hyperblur/menu-pizza-sizes"
<MenuPizzaSizes defaultSize="medium" onOrder={(lines, total) => console.log(total)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Forno Benno · Wood-fired since 2009" | Line above the heading. |
| title | string | "Pick a size. Every price follows." | Heading. The last word is set in the accent color. |
| subtitle | string | "Dough rested for two days, ..." | Paragraph beside the heading. |
| sizes | { id; label; inches: number; serves: string; multiplier: number }[] | Small 10, Medium 12, Large 14, Party 18 | Size options. Each price is the medium price times multiplier, rounded to 50 cents. |
| crusts | { id: string; label: string; price: number }[] | Classic, Thin, Sourdough +1.50, Gluten-free +2.50 | Crust options added on top of the size price. |
| pizzas | { id; name; description; price: number; toppings: string[]; art; tags? }[] | 6 pizzas | Menu. price is the medium price; art is margherita, pepperoni, diavola, bianca, verde or sausage. |
| size | string | Controlled size id. | |
| defaultSize | string | "large" | Initial size id when uncontrolled. |
| onSizeChange | (id: string) => void | Called when a size is picked. | |
| defaultCrust | string | "classic" | Initial crust id. |
| accent | string | "#d6452b" | Accent color used for highlights, selected states and buttons. |
| onOrder | (lines: MenuPizzaLine[], total: number) => void | Called when Order for pickup is pressed. | |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |