A restaurant menu with tabs for each course, dotted price leaders and a featured dish card with an illustrated plate.
Osteria Rosa · Carroll Gardens
Seasonal Italian cooking over an oak fire. Our menu changes with the market, so ask what came in this morning.
Served from 5 pm
Romesco, toasted hazelnut, aged sherry vinegar
Grilled peach, basil oil, Maldon salt, sourdough
Lemon aioli, pickled chili, fennel pollen
Smoked egg yolk, capers, shallot, potato crisps
npx shadcn@latest add https://hyperblur.dev/r/local-menu-board.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/local-menu-board.tsx.
import { LocalMenuBoard } from "@/components/hyperblur/local-menu-board"
<LocalMenuBoard defaultValue="mains" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Osteria Rosa · Carroll Gardens" | Small line above the heading. |
| title | string | "Tonight's menu" | Heading. The last word is set in the accent color. |
| subtitle | string | "Seasonal Italian cooking ..." | Paragraph under the heading. |
| sections | { id: string; label: string; note?: string; dishes: Dish[]; featured?: Dish }[] | Starters, Mains, Desserts, Drinks | Menu tabs. A dish is { name, description, price, tags? }; the price is a number string without the dollar sign. |
| value | string | Controlled active section id. | |
| defaultValue | string | Initial section id when uncontrolled. Defaults to the first section. | |
| onChange | (id: string) => void | Called when a tab is selected. | |
| cta | { label: string; href: string } | { label: "Reserve a table", href: "#reserve" } | Button on the featured dish card. |
| accent | string | "#c4572f" | 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. |