shadcn.io is not affiliated with official shadcn/ui
Hotel Reservation Checkout Block for Svelte
A stay at a small inn as a table of three rooms by three rate plans, each cell a radio with its price for a night, nights and guests steppers, tax at 12 percent and a cancellation deadline counted back from check-in.
Installation
Overview
Let people choose a room and a rate plan and see what the stay costs, with this hotel reservation checkout for Svelte with Ark UI. A compact header from Driftwood Lane, a boutique inn, sits over a narrow hairline frame with a plus mark on each corner. The first band holds the check-in date, the check-out date that follows the nights, and two steppers built from outline Buttons for the nights and the guests. Under it a native table lays three rooms (Garden, Courtyard, Suite) against three rate plans (Flexible, Saver at 12 percent less and not refundable, Bed and breakfast at $14 more per guest per night), and every cell is a radio showing the price of one night, so one Tab stop and the arrow keys walk the table. A cell that is sold out or too small for the guests says why and is skipped. The reservation under the table is worked out in whole cents: the nights at the chosen rate, the 12 percent tax, the total, and the plan's cancellation rule with its deadline counted back from check-in ("Free until Wed 4 Nov, 15:00"). Reserve is the one Shine Button; it locks the choices and gives Undo. It's built from Button, Shine Button and Guides, with a CSS entrance only. For hotels, guest houses, holiday lets and any booking priced by the night.
FAQ
How do the rate plans change the price?
Flexible is the room's base rate. Saver takes 12 percent off the night and cannot be cancelled or changed. Bed and breakfast adds $14 for each guest for each night, so changing the guests changes that column's prices, and its cancellation rule stays free until the deadline. Every figure is a whole number of cents, rounded once, and the nightly price is shown the same way in the table, the line under it and the total.
Where does the cancellation deadline come from?
It is counted from the check-in date, two days back at 15:00, with plain date arithmetic on a typed ISO date, so it never depends on today's date or the visitor's time zone. A non-refundable plan says "Non-refundable" and the line under it says that dates cannot be changed. In your app, take the deadline from the rate plan your booking system returns.
What happens when a room cannot be chosen?
A cell that is sold out for these dates, or that sleeps fewer people than the guests you set, is disabled, struck through and labelled with its reason, and the arrow keys skip it. If you raise the guests above what your chosen room sleeps, the choice moves to the first room that fits on the same plan and the status line says which room it moved to.
How does the table fit a phone?
The room names keep a narrow column, the plan names wrap in the head and the longer descriptions drop out, and the table scrolls sideways inside its band if it needs to. The scroll region is a tab stop, so a keyboard can reach it.
What does Reserve do, and can I take it back?
It locks the stay and room controls, changes the button to "Reserved" and says in the polite status line what was held and that nothing was charged. Undo, which stays in its reserved space so the foot never moves, releases the stay and returns focus to the button.
What stays local, and how do I connect it for real?
Everything: the rooms, rates, sold-out pairs and the check-in date are typed at the top of the file and the reservation is a piece of state. To connect it, load the room and plan list for the dates from your booking system, have Reserve create the hold on your server and take the card with your payment provider's hosted fields, then show the provider's answer in the status line.