A clinic hero with an appointment card beside it: pick a service, a date chip and a time slot, then confirm to see a booking ticket.
Accepting new patients in Park Slope
Same-week appointments, transparent pricing and a team that explains every step before it happens.
npx shadcn@latest add https://hyperblur.dev/r/local-booking-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/local-booking-card.tsx.
import { LocalBookingCard } from "@/components/hyperblur/local-booking-card"
<LocalBookingCard onSubmit={(r) => console.log(r.service.name, r.day.date, r.time)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Accepting new patients in Park Slope" | Pill above the heading. |
| title | string | "A calmer kind of dental visit." | Heading. The last word is set in the accent color. |
| subtitle | string | "Same-week appointments, ..." | Paragraph under the heading. |
| highlights | string[] | 3 items | Checklist under the paragraph. |
| services | { id: string; name: string; duration: string; price: string }[] | 4 dental services | Options of the service select. |
| days | { weekday: string; date: string; month: string; full?: boolean }[] | Mon 10 to Sun 16 Nov | Date chips. Days with full set are disabled. |
| slots | string[] | 12 times | Time slots shown in the grid. |
| bookedSlots | string[] | ["9:15", "11:30", "2:45", "5:00"] | Slots that are always taken. A few more are taken per day for realism. |
| phone | string | "(718) 555-0142" | Phone link under the checklist. Empty hides it. |
| accent | string | "#0f9488" | Accent color used for highlights, selected states and buttons. |
| onSubmit | (request: { service; day; time }) => void | Called when the booking is confirmed. | |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |