A wide reservation bar with date, time and a guest stepper over a warm sunset street scene, with live availability dots around the chosen time.
Lantern House · Mission District
Wood-fired plates, a long natural wine list and a patio that stays warm till close. Tables open 30 days ahead.
Parties over 8? Call us at (415) 555-0119 for the private room.
npx shadcn@latest add https://hyperblur.dev/r/local-reservation-bar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/local-reservation-bar.tsx.
import { LocalReservationBar } from "@/components/hyperblur/local-reservation-bar"
<LocalReservationBar onSubmit={(q) => console.log(q.date, q.time, q.party)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Lantern House · Mission District" | Small line above the heading. |
| title | string | "Dinner under the string lights." | Heading. |
| subtitle | string | "Wood-fired plates, ..." | Paragraph under the heading. |
| dates | string[] | 6 dates | Options of the date select. |
| times | string[] | 5:30 pm to 9:30 pm | Options of the time select and the availability row. |
| defaultTime | string | "7:30 pm" | Initially selected time. |
| defaultParty | number | 2 | Initial number of guests. |
| minParty | number | 1 | Smallest party size. |
| maxParty | number | 12 | Largest party size. |
| submitLabel | string | "Find a table" | Submit button text. |
| note | string | "Parties over 8? ..." | Small line under the bar. Empty hides it. |
| accent | string | "#e0673a" | Accent color used for highlights, selected states and buttons. |
| onSubmit | (query: { date: string; time: string; party: number }) => void | Called when Find a table is pressed. | |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |