Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Coworking Spaces Map Block for Svelte

Six coworking spaces on a drawn street map whose pins re-label with the desks free on the weekday chosen in five cells under the map, with a sortable list and a card with the day-pass price, a progress bar of free desks and amenities.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Help people pick a desk for the day with this coworking spaces map for Svelte with Ark UI. Deskfern, a flexible-office network, draws the invented town of Pentlow as an SVG street map with a station and six spaces as pills. Five cells under the map (Monday 12 to Friday 16 October 2026), each showing the total of free desks across the network, are the control: choosing a day re-labels every pin ("12 free", or "Full" in a dashed pill). A list shows each space's free desks, size, distance from the station and day-pass price, and a native select sorts it by nearest, cheapest or most free. A card beside it gives the chosen space's day-pass price in dollars and cents, a Progress bar of the desks free on that day and its amenities in words. The cells are native radios, so the arrow keys move between days. A polite status line speaks the total once the choice settles. It's built from Progress, Native Select and Guides, with a CSS entrance only. For flexible-office networks, desk-booking apps and campus space finders.

FAQ

How do I fill it with my spaces?

Edit SPACES. Each space has a name, its number of desks, a free array with the free desks for Monday to Friday, a day-pass price in integer cents, amenities, opening and closing times and an x and y in the drawing's 480 by 360 units. In your app read availability from your booking system when the day changes and keep freeOf as the one place that reads it.

How does the sort work?

Nearest sorts by the straight line from the station pin in drawing units over UNITS_PER_KM, so the drawing is a sketch, not a measurement. Cheapest sorts by the day-pass price and most free by the desks free on the chosen day. Changing the day re-sorts "most free" at once.

Can I use it without a mouse?

Yes. The five day cells are native radio buttons in one group, so Tab enters it and the arrow keys change the day. Each space is a button in the list that fills the card. The pins are hidden from assistive technology and skipped by the Tab key because the list says the same things in text.

How is a full space shown?

Its pin reads "Full" in a dashed outline instead of a solid one, the list says "Full of 36 desks", and the progress bar is empty. The word and the edge carry it; no colour does.

What stays local in the demo, and how do I wire it up?

All of it. Spaces, desks and prices are typed sample data and nothing is booked or paid. In your app put a "Book a desk" action in the card; the page has no primary button because the map is the feature.

How does it look on a phone?

The map comes first at a fixed height, then the five day cells, each showing the total free, then the list and the card stacked. The sort sits in the list's heading row.

All 100 map blocks