shadcn.io is not affiliated with official shadcn/ui
Room Booking Calendar Block for Solid
A room finder that ranks eight meeting rooms by people, start time, length and amenities, draws each room's day as a strip, lists the rooms that do not fit with a reason and books one with Undo.
Installation
Overview
Help people find a meeting room by what the meeting needs, with this room booking calendar for Solid with Ark UI. A hairline frame with a plus mark on each corner opens with a band of needs: how many people (1 to 20), a start time on the half hour from 08:00 to 17:00 in a Native Select, a length of 30, 60 or 90 minutes and three amenities (Screen, Whiteboard, Video bar) as pills. Below it the eight rooms of Thursday 15 October are ranked by need, the tightest fit first and marked Best fit, each with a ten-hour strip of its day, busy half hours filled and your slot ringed, and a sentence such as "Free 10:00 to 13:00". Rooms that are too small, lack an amenity or are busy then fold into a closed Collapsible called "Doesn't fit (5)" with the reason for each ("Seats 4, you need 6", "No video bar", "Busy 14:00 to 15:00"). Pick a room and press Book room, the Shine Button: the foot says what was booked, the strip fills and Undo gives it back. A list that matches nothing shows an Empty state at the same height. The bands are ruled by Guides. It's built from Native Select, Input, Collapsible, Empty, Badge, Button, Shine Button and Guides, with a CSS entrance only. For workplace tools, coworking apps and anything that books a shared room.
FAQ
How do I fill it with my rooms?
Edit ROOMS. Each has an id, a name, a floor, its seats, the amenities it has in kit and its busy spans for the day as "09:00-10:30" strings in time order. AMENITIES lists the amenities and STARTS the start times; the fit test, the ranking, the strips and the reasons are all worked out from them. Change OPENS and CLOSES for another opening day.
How are the rooms ranked?
A room fits when it has enough seats, every amenity you ticked and no busy span inside your slot. The rooms that fit are sorted by seats, so the smallest room that works comes first and is marked Best fit, then by floor. The ones that do not fit are listed with the first reason found: seats, then amenity, then the clash, or the building closing at 18:00.
What does Book room do?
It holds the picked room in the page: the foot says "Room 3A booked, 11:00 to 12:00", the room's strip fills for your slot, the needs lock and Undo gives the room back. Nothing is sent or saved. To make it real, call your booking API from the click handler, add the new span to that room's busy list from the response and show the API's error in the foot if the room was taken meanwhile.
Why is the day always Thursday 15 October?
Nothing in the block reads the clock. The block's fixed "now" is Wednesday 14 October 2026, so rooms are for the next day and the block looks the same on any day and in a screenshot. To follow the real date, build the day and the busy spans from your own data.
Is it accessible?
The needs are real form controls with labels: the people box, the select and the pills, which are native radios and checkboxes. The strips are decorative; each room says the same thing in words ("Free 10:00 to 13:00"). The room list is a named scroll region and the Pick buttons say which room they pick. The foot is a polite status line.