Pick a day from a strip with availability marks, choose a free slot, then add your details. Confirms with a perforated ticket and an Add to calendar file.
npx shadcn@latest add https://hyperblur.dev/r/form-booking.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-booking.tsx.
import { FormBooking } from "@/components/hyperblur/form-booking"
<FormBooking host="Lena Ortiz" startDate="2026-11-09" onSubmit={(booking) => console.log(booking)} />| Prop | Type | Default | Description |
|---|---|---|---|
| host | string | "Lena Ortiz" | Person you are booking with. |
| title | string | "Intro call · Google Meet" | Event name and location. |
| startDate | string | "2026-11-09" | First day of the strip as YYYY-MM-DD. |
| days | number | 6 | Number of days in the strip. Weekends are unavailable. |
| openHour | number | 9 | First bookable hour, 24h. |
| closeHour | number | 17 | Hour the day closes, 24h. |
| durations | number[] | [30, 60] | Meeting lengths in minutes. |
| timeZoneLabel | string | "Pacific Time" | Time zone label shown with the times. |
| accent | string | "#22c3ee" | Accent color for focus rings, selected states and the primary button. |
| delay | number | 1000 | Minimum time in milliseconds the loading state stays visible, so the transition never flickers. |
| onSubmit | (values: FormBookingValues) => void | Promise<void> | Called with date, start, end, duration, name, email and notes. |