shadcn.io is not affiliated with official shadcn/ui
Office Locations Carousel Block for Svelte
Six offices on a one-up track with a drawn map tile, the local time worked out from a typed UTC offset against a fixed moment, open or closed, and a Compare with select for the time difference and shared working hours.
Installation
Overview
Show where a team sits and when it is working, with this office locations carousel for Svelte with Ark UI. Deskmere, a flexible-workspace network, has six offices. A slide has a drawn map tile (streets, blocks, a river and a pin, built from a seed), the address, the local time and whether the office is open, and a list of the UTC offset, the difference from the office picked in the Compare with select, the working hours and the hours both offices are working. Everything is worked out from typed UTC offsets and one fixed moment, Monday 19 October 2026, 14:30 UTC: no clock, no Intl, no daylight-saving table. It uses Native Select, Button and Guides. The offices and addresses are made up.
FAQ
How do I use my own offices?
Edit OFFICES (city, address, offset in minutes, opening and closing minutes, a map seed) and AS_OF. Offsets are fixed as of that moment, so set them for the date you show.
How does it work with a keyboard?
Tab reaches the controls in the open slide, the dots, Previous and Next. With focus inside the track, the arrow keys move between slides (mirrored in a right-to-left layout) and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled. Slides out of view are hidden from the tab order and from screen readers.
What is announced when it changes?
The foot reads "Office 3 of 6: Nairobi", or "Comparing with Mumbai" after the select changes.