Back to components
Booking Slot Picker React component

What is this?

A white booking panel: a host row that reads “30 min intro call with Aiko Mori”, a seven-day date strip with previous and next week, a grid of open 30-minute slots, and the time zone. Picking a day slides the white pill and staggers that day’s slots in. Picking a slot splits it into “10:30” and a dark Confirm button. Confirm turns the panel into a confirmation card, with a check that pops in, the date, the time, and “Add to calendar”, while the height eases to fit. Back returns to the picker. Swap the host and slots, then drop it into a booking page or a sales scheduler.

Component

Booking Slot Picker

A white booking panel: a host row that reads “30 min intro call with Aiko Mori”, a seven-day date strip with previous and next week, a grid of open 30-minute slots, and the time zone. Picking a day slides the white pill and staggers that day’s slots in. Picking a slot splits it into “10:30” and a dark Confirm button. Confirm turns the panel into a confirmation card, with a check that pops in, the date, the time, and “Add to calendar”, while the height eases to fit. Back returns to the picker. Swap the host and slots, then drop it into a booking page or a sales scheduler.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Verified
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

Version 1.0.0