A light booking section: host card, a month calendar with open days, time slots that cascade in, then a validated details form with loading and confirmation states.
Book a walkthrough
A 30 minute call with someone from the product team. Bring your messiest workflow and we will map it live.
Times shown in Lisbon, GMT+0
npx shadcn@latest add https://hyperblur.dev/r/contact-booking-calendar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/contact-booking-calendar.tsx.
import { ContactBookingCalendar } from "@/components/hyperblur/contact-booking-calendar"
<ContactBookingCalendar onSubmit={(v) => console.log(v)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Book a walkthrough" | Small label above the title. |
| title | string | "Pick a time. We will bring the coffee." | Section heading. |
| subtitle | string | "A 30 minute call with someone..." | Supporting text under the heading. |
| host | { name: string; role: string; initials: string } | Marta Okafor | Person hosting the call, shown in the side panel. |
| duration | string | "30 min" | Meeting length label. |
| timezone | string | "Lisbon, GMT+0" | Time zone label shown under the calendar. |
| year | number | 2026 | Year of the first month shown. |
| month | number | 10 | First month shown, zero based (10 is November). Earlier months are not reachable. |
| defaultDay | number | 12 | Day selected on first render. If it has no open times, the next open day is used. |
| slots | string[] | 8 times from 09:00 to 16:30 | All possible start times. Each open day shows a deterministic subset. |
| points | string[] | 3 agenda points | What the call covers, listed in the side panel on wide containers. |
| onSubmit | (values: { date: string; time: string; name: string; email: string; notes: string }) => void | Promise<unknown> | Called with the booking once the form is valid. A returned promise keeps the button in its loading state; a rejection returns to the form. Nothing is posted. | |
| accent | string | "#e2553f" | Color of open days, the selected day, focus rings and the confirmation check. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |