shadcn.io is not affiliated with official shadcn/ui
Sales Call Scheduler Pricing Block for React Aria
Enterprise pricing by conversation: a scheduler with a strip of the next five working days and a grid of time slots in the visitor's own time zone, then a confirmation.
Installation
Overview
Let enterprise buyers book the call instead of filling in a form. The page's side rails and one top rule frame the section, and a single hairline splits it in two, meeting the top rule with a plus mark. The left half has the headline, one sentence and three numbered steps for what happens next. The right half is the scheduler, a card in a card: a strip of the next five working days, a grid of that day's open time slots, a work email field and one Shine Button that names the chosen time, "Book Tue, Oct 13 at 10:00 AM". It is the only control in the primary colour; the selected day and slot are filled with the foreground colour. Days and slots are native radio buttons, so the arrow keys move between them and nothing needs a script to be a group. Dates and the time zone come from the visitor's browser, so the strip is never stale. Booking swaps the form for a confirmation that takes focus and offers another time. Built with Guides, Frame, Field, Input, Button, Shine Button and Lucide icons, with CSS transitions only. For sales-led pricing pages, enterprise tiers and demo or discovery-call booking.
FAQ
Where do the dates and the time zone come from?
From the visitor's browser, in an effect after the page loads: the next five working days after today, and the zone name from Intl.DateTimeFormat. Before that, grey cells hold the strip's and the grid's size, so nothing shifts and the static page never shows a past date. Times are written in 12-hour English; change the labels in SLOTS and the formats in nextDays for your locale.
How do I connect it to a real calendar?
Replace slotsOn with the open slots your calendar service returns for the chosen day, and fill book with the request that creates the booking. Send the day's id, the slot's id and the visitor's zone name (zone), and let your server convert the time with the zone, since the slots here are the visitor's local times. Show the confirmation once the server accepts the booking, and keep the form with an error message if the slot was just taken.
Is the scheduler accessible?
Yes. The days and the times are two groups of native radio buttons, each in a fieldset with a legend, so Tab reaches the selected one and the arrow keys move and select; the selected chip and the focused chip are visibly different. The email field has a visible label, is required and is an email input with autocomplete. Once the call is booked, focus moves to the "You're booked" heading, so screen readers read the confirmation at once; Pick another time brings the form back and moves focus to its heading. Focus never moves on its own when the page loads.
Why doesn't the card change size between the form and the confirmation?
The form and the confirmation sit in the same grid cell, so the cell is always as tall as the form. When the call is booked, the form stays in place but is hidden and made inert, so it can't be focused or read, and the confirmation fades in over it. Under reduced motion it appears without the fade.
How does it adapt to phones?
From the lg breakpoint the pitch and the scheduler sit side by side. Below it the order is the headline, the scheduler, then the three steps, so the button is reached within a screen and a half. The five days stay in one row at 320 pixels, and the time slots go from four to three columns, wrapping onto as many rows as they need.
When is a scheduler better than a contact form?
Use a scheduler when the next step is a call and buyers expect to pick the time: it removes the back-and-forth emails and shows that someone is ready to talk. Use a form when sales needs to qualify requests first or route them by size, and let the form's answers decide who calls.