shadcn.io is not affiliated with official shadcn/ui
Power Grid Map Block for React Aria
A single-line diagram of one power station, two transmission and four distribution substations; a demand slider raises every load up to 30 percent, lines over capacity turn dashed and the first to fail is named.
Installation
Overview
See which lines give out first, with this power grid map for React with React Aria. Voltmarsh, a grid operator, draws one generating station, two transmission substations and four distribution substations as squares on a single-line diagram, joined by eight lines whose width is their capacity in megawatts. A Slider raises demand from 0 to 30 percent above today: every substation's load and every line's flow grow by that share, a line over its capacity turns dashed and says "Overloaded", a substation over capacity gets a dashed border and "Over capacity", and the header names the line that goes first and at what percentage. A list of substations with a load meter is the way in: choose one and a card lists its feeders with flow against capacity. It's built from Slider and Guides, with a CSS entrance only. For grid operators, planning tools and utility dashboards.
FAQ
How is an overload decided?
Each line and substation has a typed base value (flow, load) and a cap. At a demand rise the value is the base times one plus the share, and it is over when it passes the capacity. The line that goes first is the one with the smallest ratio of capacity to flow, found once as firstFeeder.
How do I use my own grid?
Edit SUBSTATIONS (a name, a mark, load, capacity and a position in the 480 by 360 units) and FEEDERS (two ends, a flow and a capacity). The diagram, the lists, the meters and the sentence read the same two lists.
Is this a power flow model?
No. Every load grows by the same share and flows are not re-routed when a line is overloaded, so it shows headroom, not what a real grid does. For planning use a load-flow study and keep this block as the display.
Can I use it without a mouse?
Yes. The slider takes the arrow keys and speaks its value, the list of substations is the keyboard route (each row is a button), and the feeders are a plain list that says Overloaded or Within capacity in words. The squares on the diagram are a pointer shortcut and are hidden from assistive technology.