shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Compare rates before a guest commits to one with this hotel card for Vue with Ark UI. A hairline frame opens with a wide tile: the hotel drawn beside its room type, four amenity words, a "+6 more" chip that opens the rest in a Popover and "2 rooms left" in words. Below it three rate plans (Non-refundable, Flexible, Breakfast included) are native radios with a price a night, and a Toggle Group sets 1, 2, 3 or 5 nights while the check-out date follows. A description list adds the room, a 12 percent city tax and the total, all in integer cents, and one Shine Button holds the room. For hotels, guesthouses and any stay sold by the night.
FAQ
How do I change the rates and the nights?
Edit the PLANS array for names, terms and the price of a night in cents, STAYS for the night counts, and TAX_PERCENT for the tax. The check-out date comes from the check-in constants IN_DAY and IN_WEEKDAY and the nights, with a weekday list instead of Intl.
How is the tax rounded?
Once, in whole cents, from the room charge: Math.round(room * percent / 100). The room line, the tax line and the total are all integer cents, so they add up exactly.
What does the +6 more chip do?
It opens a popover with the remaining amenities as a list. It is a real button, so Enter and Space open it and Escape closes it and returns focus to the chip.
What stays local, and how do I wire it for real?
The held room is page state. Nothing is booked, charged or sent. Replace the constants with your availability and rate endpoint and the body of hold with a call that places a reservation hold.
