Make it yours
npx shadcn@latest add https://elabs-ai.com/r/energy-operations-page.jsonPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui template "Energy Operations" (energy-operations-page) to this project — a whole screen copied into the app, built from registry blocks and the @elabs-ai/components-* packages. A utility's site desk runs the grid connection of eight industrial parks. The headline says who is buying above contract and who is near the capacity band; the table and the map name the same sites; picking one re-reads its 120 days of meters and opens its contract, its alarms and an analyst beside the screen. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Make sure the base is in place: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`), then the packages the template imports: @elabs-ai/components-ai, @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-maps, @elabs-ai/components-tokens, @elabs-ai/components-ui. If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 3. Copy the template in with `npx shadcn@latest add https://elabs-ai.com/r/energy-operations-page.json` — it brings its blocks with it (energy-desk-01, workspace-shell); if that url does not answer, copy the folders from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks instead. 4. Mount the page at a route, keep its `WorkspaceShell` frame, and replace the seeded data with ours: [the route, the real data source, and what should change from the template] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
What each view shows
The screens the navigation names, one line each.
- Sites
- The fleet headline, the KPIs, the sites table and the map.
- Alarms
- Every open alarm, most severe first, with the runbook's response.
- Map
- The sites where they stand, status as colour, glyph and word.
- Forecast
- The selected site's meters against the day-ahead price.
- Contracts
- Supply agreements per site — supplier, price, end date.
- Reports
- Monthly cost and consumption per site.
Try it on the screen above: Select a site in the table or on the map: the energy desk re-reads its meters, the dock opens with its contract and alarms, and Acknowledge steps the site down from alarm to watch — the nav badge and the row agree.
What it is made of
The blocks and packages the template composes — each has its own page. Copy the template and you copy the blocks with it.
2 blocks
What did the site draw, what did the market charge — and what did a period cost?
Two hourly series on one window: a LineChart of the spot price owns the navigator strip (scrollbar="miniChart", controlled window + onWindowChange) and an AreaChart of site consumption follows it through xDomain, with a 24-hour rolling mean and a one-sigma band from analytics[]. Preset buttons (24 h / 7 days / 30 days / All) jump the window; a range on the consumption chart's time axis picks a period, and the KPIs price it hour by hour — consumption × spot price — so the effective $/MWh the site pays sits beside the simple average.
Examples
Select And Acknowledge
Select a site, then acknowledge its critical alarm: the row, the dock and the nav badge agree.