shadcn.io is not affiliated with official shadcn/ui
Booking Reservation Stepper Block for Ark UI
A four-step cabin booking with an inline range calendar, cabin cards, a guest count and a summary cell that shows dates, nights, rate, cleaning fee and total in live whole cents.
Installation
Overview
Let guests see the price while they plan a stay, with this booking stepper for React with Ark UI. A hairline frame with plus marks splits into a wizard and a summary cell. The wizard is a Steps line of four numbered circles: Dates, Cabin, Guests and Confirm. Dates is an inline range Calendar in the foreground colour, where you pick an arrival day and a later departure day; Cabin is a Radio Group of three cards with a nightly rate; Guests is a minus and plus counter and a lead guest's name and email in Fields. The summary cell beside it lists the dates, the nights, the rate times the nights, a $65.00 cleaning fee and the total, all worked out in whole cents and updated with every choice. Each step checks its own fields and says what is wrong in a reserved line. "Reserve" is the block's one Shine Button. For cabins, rooms, studios and any stay priced by the night.
FAQ
What does each step check?
Dates need an arrival and a later departure, 2 to 14 nights, and days before the demo's fixed "today" (18 Oct 2026) cannot be picked. Cabin needs a choice. Guests needs a headcount within what the cabin sleeps, a name of two letters or more and a valid email. The checks run when you press Next, and a problem clears when you change that field.
How is the total worked out?
In integer cents: the nightly rate in cents times the nights, plus CLEANING. usd is the only place cents become dollars. To change a rate or the fee, edit CABINS or CLEANING; the summary, the card prices and the confirmation all read from them.
Why does the calendar open on a different month?
The calendar opens on the visitor's month; the demo's fixed "today" only decides which days are off. Pick days in any month and the summary follows. After "Start over" the calendar remounts empty.
What stays local, and how do I make it real?
Everything. Nothing is reserved and no email is sent: Reserve ends on a panel that says "Reserved in this demo". To make it real, check availability for the chosen dates and cabin on your server, and send the dates, cabin, guests and lead guest from the submit handler on the last step.
Where does the summary go on a phone?
The summary cell is hidden and the total moves into the sticky foot above the status line, so the price stays in view while the steps and the calendar scroll. The calendar cells shrink a little below 640 px so a month fits the panel.
How does the keyboard work?
The step line is one tab stop on the current step; arrow keys move between the steps you can reach and Enter or Space opens one. Inside the calendar, arrow keys move between days and Enter picks one. After a move, focus goes to the step's heading, and a polite line in the foot says where you are.