Contact Booking
Book-a-demo block: pick a day, pick a slot and confirm without leaving the page.
- Type: Contact section
- Styles: Light, Enterprise
- Licence: Charcoal UI Pro
About Contact Booking
Contact Booking lets visitors book without leaving your page: the host and agenda on the left, a calendar in the middle and time slots on the right, then a confirmation with the day and time.
It is a full-width contact section for React and Tailwind CSS 4, in a light and enterprise style. Preview it at any width above, then install it with one command.
When to use Contact Booking
- SaaS demo booking.
- Clinics and telehealth.
- Barbers, salons and coaches.
- University tours and consultations.
How it is built
Uses Calendar with weekends and past days disabled, slots are a prop, and some slots show as taken so the grid feels real until you connect your availability.
It is composed from Button, Calendar, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Contact Booking
Contact Booking is part of 9 full templates, so you can see it in a finished page.
- Sable template: Enterprise security without the theatre.
- Cadence template: Book meetings without the back-and-forth.
- Monograph template: A one-person portfolio that books calls.
- Copyhouse template: Words that sell, from one writer.
- Fade template: Book a chair, skip the wait.
- Brightside template: A dentist people don't dread.
- Harbor template: Payroll in ten minutes a month.
- Carebridge template: See a doctor today, from your sofa.
- Quadrangle template: Programmes, people and open days.
- Contact Form: A React contact form with topic pills, inline validation and a success state
- Contact Offices: React office cards with each city's live local time and open-now status
- Contact Support: A React support hub with live channel status, reply times and system status
- Button: An animated React button with six variants, spring press feedback and a width-stable loading state
- Calendar: An animated React calendar where months slide and the selection glides between days
Install Contact Booking
npx shadcn@latest add @charcoal/contact-bookingContact Booking is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Contact Booking work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.