shadcn.io is not affiliated with official shadcn/ui
Open Houses Tour Map Block for Radix UI
A weekend viewing planner: a day toggle, eight homes with viewing slots on a drawn map, a tick list that builds a time-ordered tour with the drive between viewings and clashes in words, and a real .ics calendar download.
Installation
Overview
Plan a day of viewings without double-booking yourself, with this open houses tour map for React with Radix UI. Openlatch, an open-house planner, draws eight homes for sale in the invented town of Yarrowfold on an SVG street map, each with a 45-minute viewing slot on Saturday, Sunday or both. A day Toggle Group picks the day; ticking a home adds it to the tour. The tour is sorted by time, numbered on the map and joined by legs, and each ticked row says how long the drive from the viewing before takes and when you arrive. When the next viewing starts before you can get there the row says so in words, for example that you arrive 14 minutes after it starts, and the leg on the map is dotted instead of solid. A summary above the map counts viewings, minutes of driving and clashes. The header's one Shine Button, Download plan, saves a real calendar file (.ics) with one event for each viewing of the chosen day. Drives are the distance in the drawing over a typed town speed; the homes and slots are sample data and nothing is booked. For open-house, estate-agent and event-planning apps.
FAQ
How is a clash worked out?
For each ticked home after the first, the block takes the end of the viewing before (start plus 45 minutes), adds the drive time and compares the result with the start of this viewing. The drive is the straight line in the drawing divided by UNITS_PER_KM, at KMH, rounded up to the minute. If you would arrive after the start, the row says by how many minutes and the leg is dotted. It is a simple rule: replace driveMinutes with a routing service's travel time in your app.
What does Download plan save?
A real .ics file named for the day, built in the browser with CRLF line ends and floating local times (no time zone, so it lands at the same clock time in any calendar). Each viewing is an event with the address, a 45-minute length and the drive note. Nothing is uploaded, and nothing is booked with the agent. With an empty tour the button answers in words instead of saving an empty file.
What about a home with no viewing on the chosen day?
Its row stays in the list, in place, dimmed and unticked-and-disabled, with the words "No viewing this day", so the list never changes height when you switch days. A home you ticked on Saturday stays ticked and returns when you switch back.
Can I use it without a mouse?
Yes. The day toggle is one tab stop; each home is a real checkbox with its time, beds and price in the label, and the drive or clash sentence under it. The summary and the result of each tick are spoken by a polite message. The pins and legs are hidden from assistive technology because the list says the same things in text.
What stays local in the demo, and how do I wire it up?
The slots, prices and map are typed sample data, dated 17 and 18 October 2026. The only thing that leaves the page is the calendar file you download. In your app load the open-house slots from your listings, and consider a link to each home's own page in its row.