Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Renewable Energy Map Block for React

Twelve solar, wind and hydro sites on a drawn coast, resized by a time-of-day toggle from typed profiles, with a stacked bar of the mix against a demand line and the share of demand met.

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 a portfolio's output follows the clock, with this renewable energy map for React with Base UI. Fieldwatt, a renewable portfolio, draws the coast and uplands of an invented county, Marrowden, with twelve installations: solar as circles, wind as squares and hydro as triangles, each pin sized by what it makes. A Toggle Group in the dock under the map steps through Midnight, 06:00, Noon and 18:00 and the pins resize from typed profiles: solar follows the sun, wind barely moves and hydro is steady. Beside the toggle a stacked bar splits the output into solar, wind and hydro, in three weights of foreground, and a line marks the demand at that hour; the sentence above says how much of demand is met, such as "Noon: 118 percent of demand". Three lists below, one per kind, give every installation's output as a Progress bar against its capacity, and pressing a row or a pin rings the other. A polite status line speaks the new mix. It's built from Toggle Group, Progress and Guides, with CSS transitions only. For energy portfolios, grid operators and sustainability reports.

FAQ

How do I use my own installations?

Edit SITE_LINES: an id, the kind (solar, wind or hydro), a name, a position in the drawing's 480 by 360 units and the capacity in MW. The profiles are three arrays of four percentages (SOLAR, WIND, HYDRO) and DEMAND holds the demand in MW for each time. In your app feed the output from your metering and keep the toggle for looking at other hours.

How is the output worked out?

Each site's output is its capacity times the profile for that kind and hour, held in tenths of a megawatt. Noon gives solar 78 percent of capacity, wind 44 and hydro 60; at midnight solar is zero and its circles become dashed outlines. The total over the demand is rounded to a whole percent. These are sample figures for the demo, not a forecast.

How do I read the bar without colour?

The three kinds are three weights of foreground (dark, mid, light), always in the same order, and the legend under the bar names each with its megawatts. The demand is a vertical line with a ring around it, and the same figure is in the legend and the sentence. The bar itself is decoration; every number is in text.

Can I use it without a mouse?

Yes. The time toggle is one tab stop and takes the arrow keys, and the installations are lists of buttons, one tab stop each, that mark the matching pin. The pins are hidden from assistive technology and skipped by the Tab key because the lists say the same things in text.

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

All of it. Nothing is measured, the profiles are typed and choosing a row only marks its pin. In your app read each site's output from your metering for the hour chosen and keep the capacity as the denominator for the meters.

How does it look on a phone?

The map comes first with a fixed height, then the dock: the sentence, the bar, its legend and the time toggle with 44 pixel buttons. The three lists stack under it, four rows each, and the page keeps the same height for every hour.

All 100 map blocks