shadcn.io is not affiliated with official shadcn/ui
Road Closures Map Block for React
Eight closures as square, triangle and circle marks on road segments of a drawn town; choosing one draws its dashed detour and gives the delay, the end time and a note, and the foot totals the delay.
Installation
Overview
Tell drivers which roads are shut and the way round, with this road closures map for React with Base UI. Roadwarden, a city traffic office, draws eight sample closures on an SVG street map of an invented town (Wexleigh). The type is a shape as well as a word: roadworks are a square (W), a crash a triangle (C) and an event a circle (E), and a closed stretch of road is a heavy bar. Choosing a closure in the list, or its mark on the map, draws its dashed detour and fills an inset card with the delay ("+6 min via Meadow Lane"), the typed end time and a short note; below the large breakpoint the card docks under the map. A Toggle Group filters by type. One closure has already reopened, so it is faded, draws no detour and adds no delay. The foot totals the delay across the closures still open and says it in a polite message that changes with the choice. Times are typed ISO strings against a fixed "now". It's built from Toggle Group and Guides, with a CSS entrance only. For city traffic offices, delivery and navigation tools.
FAQ
How do I use my own closures?
Edit CLOSURES: a name, a type, the closed stretch as two corners, the detour as a list of corners, the minutes it adds, the street it uses, an end time as an ISO string and a note. The bars, the marks, the detour, the card, the list and the foot's total are all worked out from that list and AS_OF.
Where does the delay come from?
It is typed for each closure in this demo. In your app take it from a routing service by comparing the usual route with the detour at the current traffic, and update the total as closures open and close.
Why are the types shapes and not colours?
The shape and its letter carry the type, and the list says it in words, so the map works in any theme and for any eye. The only fill is the foreground, which keeps the closures from competing with the detour line.
Can I use it without a mouse?
Yes. The type filter takes the arrow keys, each closure is a button in the list, and a polite message gives the delay and the total. The marks on the map are a mouse and touch shortcut to the same choice.