A bold street-food specials board with a looping ticker, a weekday switcher and a limited-quantity meter on each special that counts down as guests hold one for pickup.
Fuego Street Kitchen · 418 Mercer Ave
FriFuego Friday
Slow-braised beef, melted Oaxaca cheese, consommé to dip
Fried chicken thigh, cayenne oil, pickles, slaw
Detroit-style slice, crispy cheese edge, hot honey
npx shadcn@latest add https://hyperblur.dev/r/menu-specials-today.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-specials-today.tsx.
import { MenuSpecialsToday } from "@/components/hyperblur/menu-specials-today"
<MenuSpecialsToday todayIndex={1} onClaim={(s, left) => console.log(s.name, left)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Fuego Street Kitchen · 418 Mercer Ave" | Small line above the heading. |
| title | string | "Today's specials" | Heading. The last word is set in the accent color. |
| days | { day: string; short: string; theme: string; specials: MenuSpecial[] }[] | Monday to Sunday | One entry per weekday. A special is { id, name, description, price, was?, left, total, art, color? }; art is taco, burger, fries, skewer, bowl, pizza, hotdog or corn. |
| todayIndex | number | 4 | Day selected first and labelled Today. Pass it from the server or a client effect; the block never reads the clock. |
| ticker | string[] | 6 lines | Phrases in the scrolling strip at the top. An empty array hides it. |
| onChange | (index: number) => void | Called when another day is selected. | |
| onClaim | (special: MenuSpecial, left: number) => void | Called when a guest holds one, with the quantity left after it. | |
| accent | string | "#ffc23d" | 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. |