Demo Booking Card

An inline day-and-time picker for booking a demo call, showing every slot in the visitor’s own detected timezone so nobody has to do the conversion math themselves. Submits the chosen slot to any scheduling backend and ends in a confirmed state.

Growth & Conversion · React · Subscription · commercial licence · v1.0.1 · updated 2026-10-15 · Live demo

Install

velocityx add demo-booking-card

Subscription component. Run velocityx login with your key first — get one.

---
import DemoBookingCard from '../components/velocity/demo-booking-card/DemoBookingCard.tsx';
---
<DemoBookingCard client:visible />

Props

Prop	Type	Default	Description
headline	string	'Book a 30-minute demo'	—
subhead	string	"Pick a time that works for you — we'll send a …	—
daysAhead	number	5	—
slotTimes	string[]	['09:00', '11:00', '13:30', '15:30']	—
durationMinutes	number	30	—
bookedSlots	string[]	[]	—
onSubmit	(slot: { startIso: string; timeZone: string }) => Promise<void>…	—	—
ctaLabel	string	'Confirm booking'	—
confirmedHeadline	string	"You're booked."	—
confirmedBody	(slot: Date) => string	(slot) => We'll send a calendar invite for ${s…	—
className	string	''	—

Files written

velocityx drops these into your project:

• components/velocity/demo-booking-card/DemoBookingCard.tsx

Peer dependencies

react — nothing else. Zero external dependencies is the point.

Theming

Colours come from the primary-* / accent-* Tailwind scales, so this drops into a project that is not Velocity without dragging our brand in. Install the contract once:

velocityx theme

Then set your whole brand in one place — raw RGB channels, not hex (a hex here silently breaks every opacity variant):

:root {
  --vx-brand: custom;
  --vx-primary-600: 220 38 38;
}

There is no component-level font-family anywhere in the library — your font cascade wins.

Licence

Commercial, for the duration of an active Velocity X subscription. The source is served by the licence-gated endpoint, never by the public CDN.