shadcn.io is not affiliated with official shadcn/ui
Energy Usage Calendar Block for React
A day of hourly kWh as 24 bars over three tariff bands, a month-so-far total, and a slider that places a two-hour appliance cycle and compares its cost with the cheapest start.
Installation
Overview
See when your home uses energy and when it is cheapest to run a cycle, with this energy usage calendar for React with Base UI. A hairline frame with a plus mark on each corner holds a chart of Tuesday 13 October 2026: 24 bars of hourly use over three tariff bands drawn in three patterns, plain for off-peak, hatched for mid and a heavier tint for peak, with the day's total beside the title. Under it a strip of three figures gives yesterday's use and what it cost at these rates, the month so far worked out from the typed days, and the average a day. A Slider from 00:00 to 22:00 places a two-hour dishwasher cycle over the chart as an outlined window. The cost is worked out from the typed draw of each hour and the rate of the band it falls in, and compared with the cheapest start: "Costs €0.84. The cheapest start (05:00) costs €0.26." Move to cheapest sets the slider there. The use and the rates are sample data, and the fixed "now" is 14 October 2026. The bands are ruled by Guides. It's built from Slider, Button and Guides, with a CSS entrance only. For home energy monitors, tariff comparisons and any app that moves flexible load to cheaper hours.
FAQ
How do I use my own readings and tariff?
Edit HOURLY (watt-hours for each hour of the day), EARLIER (whole-day watt-hours for earlier days of the month), BANDS (name, hours and rate in cents per kWh) and bandIdOf, which says which band an hour falls in. The totals, the day's cost and the cheapest start are all worked out from them.
How is the cycle's cost worked out?
The appliance has a typed draw for each hour of the cycle (DRAW, in watt-hours, heavier while it heats). Each hour's draw is multiplied by the rate of the band that hour falls in, and the hours are added. Amounts are formatted as euros with Intl.NumberFormat; change EURO for your currency.
Which start counts as the cheapest?
The starts that cost the least can be several in a row, because a whole off-peak stretch costs the same. The block picks the latest of them, so the cycle ends just as the cheap band does.
How do I use the slider with the keyboard?
Tab to the thumb and use the arrow keys to move an hour at a time, Home and End for the ends. The thumb is named by the label and reads "Start at 05:00". A polite status line says the cost when you stop moving, not on every step.