Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Construction Sites Map Block for Radix UI

Nine building sites on a drawn town with a progress ring on every pin, a phase filter with counts and a behind-plan switch; a site card shows its progress bar and the weeks behind or ahead worked out from planned and forecast dates.

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

Track which building sites are late with this construction sites map for React with Radix UI. Gantryhill, a site management app, draws nine sites on a street map of an invented town. Every pin carries a ring that fills with the share complete and the site's number, and a pin with a dashed edge is behind plan. The phase is derived from the progress, Planning, Foundations, Structure, Fit-out or Handover, and a ToggleGroup filters by phase with a count on each; a Switch keeps only the sites behind plan. The slippage is worked out from dates, the forecast finish against the planned one in whole weeks, with "today" a fixed constant, so a card reads "2 weeks behind", "On plan" or "1 week ahead". The list at the side opens a site card with a Progress bar, the three dates and the weeks to handover, and a back button returns to the list. For contractors, developers, councils and any programme of works.

FAQ

How is 'behind plan' decided?

slipDays is the number of days from the planned finish to the forecast finish. More than three days is behind, rounded to whole weeks and never less than one; less than minus three is ahead; anything between is on plan. Today is the constant AS_OF, used for the weeks to handover, so nothing reads the clock.

Where do the phases come from?

From the progress alone: PHASES lists the lowest progress of each phase, and phaseOf picks the last one the site has reached. In your app take the phase from your schedule and keep the ring as the share of work done.

Can I use it without a mouse?

Yes. The phases are a toggle group, the switch has a label, and each site is a row button that opens its card. Opening a card moves focus to "Back to list", and going back returns focus to the row you left. The pins are hidden from assistive technology because the list says the same things, and a polite message gives each result.

Can the list be empty?

Yes: "Behind plan only" with a phase that has no late site, such as Handover, shows an empty state in the list's own box. The panel keeps its height, and the pins of the other sites stay on the map as hollow rings.

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

All of it. The sites, progress figures and dates are invented, and nothing is saved or sent. In your app feed SITE_LINES from your project system and open a card into the site's programme.

How does it look on a phone?

The phase filter scrolls sideways above the map, the switch sits under it, the map keeps a fixed height and the list or card stacks under it in a box of fixed height with its own rule.

All 100 map blocks