Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Water System Map Block for React

Three reservoirs, three treatment works and six supply zones on a drawn valley; a toggle of 0, 2, 4 or 6 dry weeks lowers each reservoir gauge, and every zone says how many weeks of supply remain and its restriction level.

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

Show how long the water lasts, with this water system map for React with Base UI. Weirwood, a water utility, draws three reservoirs with a vertical gauge each, three treatment works and six numbered supply zones on a river valley with contour lines, joined by trunk mains (solid) and distribution mains (dashed). A Toggle Group sets 0, 2, 4 or 6 dry weeks: each reservoir loses a typed share of its level a week, so the gauges fall, and a list of zones says for each how many weeks of supply remain and the restriction its reservoir's level brings, in words: None, Hosepipe ban or Rationing. A restricted zone gets a dashed ring on the map. The header says the result in a sentence and a polite message speaks it after each choice. It's built from Toggle Group and Guides, with a CSS entrance only. For water utilities, drought planning and public notices.

FAQ

How are weeks of supply and restrictions worked out?

Each reservoir has a level today and a drop in percentage points per dry week. The level after some weeks is the level minus weeks times the drop, never below zero; the weeks of supply remaining are that level over the drop, rounded down; and the restriction is None at 50 percent or more, Hosepipe ban from 25 percent, Rationing below. All are typed rules, not a hydrological model.

How do I use my own system?

Edit RESERVOIRS (a level, a drop and a position), WORKS (which reservoir feeds each works) and ZONES (which works supplies each zone), and DRY for the choices. The gauges, mains, list and sentence follow.

Can I close a valve or divert supply?

No. This block asks how long supply lasts, not how to re-route it; the fiber network block is the one that cuts a link. Add a control of your own that changes which works feeds a zone.

Can I use it without a mouse?

Yes. The toggle group is a labelled control and the zones are a plain list that gives each zone's reservoir, level, weeks remaining and restriction in words. The map is decoration, hidden from assistive technology, and a restricted zone is marked by its word as well as its dashed ring.

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

All of it. The reservoirs, rates and thresholds are invented and nothing is measured. In your app feed the levels from your telemetry and the drop from a demand and inflow forecast.

How does it look on a phone?

The toggle comes first, the map has a fixed height, and the zones scroll in a box of fixed height under it, so choosing another number of weeks never changes the length of the page.

All 100 map blocks