shadcn.io is not affiliated with official shadcn/ui
Environmental Impact Ledger Profile Block for React
A programme lead profile as an impact ledger: eight quarters as stacked columns of carbon removed by forests, wetlands and energy with a tick for what the trust emitted, a year filter that dims the others, the net balance worked out and the picked quarter read area by area.
Installation
Overview
Set what a trust took out of the air against what it put in, with this environmental impact profile for React with Base UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the programme lead: initials, name, role and organisation, and a badge with the net balance of the quarters that are lit, worked out from the data. A Toggle Group (All, 2025, 2026) narrows the ledger by dimming the other years, not by removing them, so the axis and the panel never move. The chart is eight stacked columns, one per quarter, drawn in CSS on a fixed axis: each column stacks tonnes removed by forests, wetlands and energy in three weights, a tick across it marks what the trust emitted that quarter, and each column is a radio you can pick with a click or the arrow keys. A legend of outline badges gives each area's total, three figures give removed, emitted and the net balance ("Net balance: −1,240 t" means more came out than went in), and the quarter you pick is read below area by area with shares that add to 100. It's built from Toggle Group, Badge, Avatar and Guides with CSS only. The lead, the trust and the tonnes are invented. For an impact ledger, an annual report or any profile that accounts for carbon.
FAQ
How do I fill it with my own quarters?
Edit QUARTERS in the Ark file: each quarter has a year, a number from one to four, the tonnes removed by each programme area and the tonnes the trust emitted. To add an area, extend AREAS and the quarter type. The axis top, the column and segment heights, the tick, the totals, the net balance and the shares are worked out from those numbers.
How is the net balance worked out?
As tonnes emitted minus tonnes removed across the quarters that are lit, shown with a true minus sign when more was removed than emitted. The sentence under the figures says which way it goes. The block does not net out anything else, and in a real ledger the method (what counts as removed, how it is measured) matters more than the arithmetic, so state it next to the chart.
What does the year filter do?
It dims the quarters of other years to faint tints, and the totals, the legend and the net balance use the quarters that are lit; nothing is removed, so the axis, the columns and the panel height stay put. The status line says how many quarters are lit. Dimmed quarters can still be picked and read.
How do I use the chart with a keyboard or a screen reader?
The columns are native radios in one group named "Quarters by tonnes removed", so Tab enters at the picked quarter and the arrow keys move between quarters, picking each. Each column is named with the quarter, the tonnes removed and the tonnes emitted ("Q2 2026: 840 t removed, 540 t emitted"). The drawn stack, the tick and the axis are hidden from assistive technology because the names and the readout say the same.
Is it accessible, and what about right-to-left?
The chart always runs left to right, since time does; the words around it follow the page's direction and figures are isolated so they keep their order. The three areas differ by weight and by the legend, and the readout lists each in words, so nothing rests on shade alone. The status line is a polite live region present from the start, and the entrance is a CSS fade that stops under reduced motion.
What stays local, and how do I wire it to real data?
Everything is typed sample data: the trust, the programme areas and every tonne are invented, and picking a quarter or a year only changes the page and the status line. To wire it up, load your measured quarters into QUARTERS, keep the helpers, and cite the methodology and the verifier beside the chart.