shadcn.io is not affiliated with official shadcn/ui
Emissions Step-Down Sustainability About Block for React
A sustainability story for a carbon-accounting company: a hand-built step chart of emissions per customer falling over six years, numbered pins on the steps, and a list of what was done at each one.
Installation
Overview
A sustainability block for React with Base UI, written for Tallowmoor, a fictional carbon-accounting company that reports on its own emissions. In a framed figure at the start, a step chart draws the kilograms of CO2e it emits per customer each month from Year 1 to Year 6: a line that holds level through a year and drops at the start of the next, with the value above every year. Numbered pins sit on the four steps where something changed. Behind a split divider at the end, the total cut is a large figure and an ordered list says what was done, each item numbered like its pin, with the year it landed and the kilograms it took off. The chart is hand-built from one series of numbers, so the steps, the pins, the size of each cut and the total always agree. On a phone the chart sits between the title and the list. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, with CSS for the chart and for the entrance, and your theme's tokens for every colour. For about pages, ESG pages and any company that wants to show a cut with its causes, not just a number. The figures are example data.
FAQ
How do I change the series, the pins and the list?
The series is SERIES at the top of the file: kilograms per customer per month, one value per year. The actions are ACTIONS, each with a title, a sentence and the year in which it landed: its pin is drawn at the start of that year's column, half way down the drop, and its saving is the difference between that year and the one before. The total cut and the sizes of the cuts are computed, so they follow the series. CEILING sets the top of the chart.
Is the chart a chart component?
No. It is an SVG step line stretched over a box, with the grid, the value labels, the pins and the year labels laid over it as ordinary elements by percentage, so pins and text stay crisp and round at any width. It uses no chart library and no script, so the block can render on the server.
How is the chart read by a screen reader?
The drawing is hidden from assistive technology, and its facts are in text instead: the caption says what is measured, the total cut and the two end values are in the sentence at the end, and the ordered list names each step with its year and the kilograms it took off. Nothing depends on colour; the line, the pins and the numbers are all in foreground tones.
What happens in a right-to-left layout?
A time axis keeps its direction, so the chart is isolated with dir="ltr": Year 1 stays at the start of the reading order the way numbers do. The text around it follows the page, and the figures with a sign or a unit are isolated so a minus stays beside its number.
Related
- Pro
Pledge and Causes Charity Giving About
Principles and processA split about a company's giving: the pledge as a percent of revenue and the matching rule at the start; five causes with progress toward what each was promised and a participation figure at the end.
- Pro
Stacked Total Impact About
NumbersA total built from its parts for a scheduling tool: a framed lead with the hours returned over a stacked bar and a legend whose numbers add up to it, and a band of three smaller impact cells.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
Bubble Plot Key Moments About
TimelinesA company's key moments as a bubble plot on a time axis, each bubble sized and raised by impact with the three that changed the company filled in, and the same moments as a ruled ordered list beneath.