A light restaurant card grid with large illustrated dishes. Hovering lifts a card and reveals ingredients and calories; guests can save dishes and add them to a running order.
Lumen Kitchen · Spring menu
Six plates our regulars order again and again. Hover a dish for what goes into it.
Hand-rolled tonnarelli, pecorino romano, toasted black pepper
Grilled peach, heirloom tomato, basil oil, pistachio
12 oz dry-aged, salsa verde, crispy smashed potatoes
Chicken and dashi broth, chashu, soft egg, nori, scallion
Sushi rice, avocado, cucumber, yuzu ponzu, furikake
Brown butter crust, Meyer lemon curd, torched meringue
npx shadcn@latest add https://hyperblur.dev/r/menu-photo-cards.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-photo-cards.tsx.
import { MenuPhotoCards } from "@/components/hyperblur/menu-photo-cards"
<MenuPhotoCards defaultOrder={{}} onAdd={(d, q) => console.log(d.name, q)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Lumen Kitchen · Spring menu" | Small line above the heading. |
| title | string | "Chef's favorites this season" | Heading. |
| subtitle | string | "Six plates our regulars order ..." | Paragraph under the heading. |
| dishes | { id: string; name: string; description: string; price: number; calories: number; ingredients: string[]; art: "pasta" | "salad" | "steak" | "tart" | "ramen" | "poke"; tint?: string; badge?: string }[] | 6 dishes | Cards in the grid. Tint is the soft background behind the dish art. |
| defaultSaved | string[] | ["ramen"] | Dish ids saved with the heart on first render. |
| defaultOrder | Record<string, number> | { cacio: 1, poke: 2 } | Quantities already in the order on first render. Pass {} to start empty. |
| onAdd | (dish: MenuPhotoDish, quantity: number) => void | Called when a quantity changes, with the new quantity for that dish. | |
| onSaveChange | (ids: string[]) => void | Called when a dish is saved or removed from saved. | |
| accent | string | "#ff6b4a" | Accent color used for highlights, selected states and buttons. |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |