shadcn.io is not affiliated with official shadcn/ui
Carbon Footprint Dashboard Block for Ark UI
Twelve monthly stacked columns of compute, storage and networking emissions with a glide path to the 2030 target, an offset slider that draws the net line and names the quarter it reaches the path, and a category table.
Installation
Overview
Check whether your emissions are on course for net zero, with this carbon panel for React with Ark UI. A hairline frame with a plus mark on each corner holds twelve monthly columns of Leafledger's emissions in tonnes of CO2e, stacked by compute, storage and networking, with a dashed glide path to the 2030 target drawn across them. A Slider sets the tonnes offset each quarter from 0 to 40 and a solid net line follows it. A small loop carries the last month forward and a polite line says the quarter the net emissions first sit on the path and the quarter they slip off it again. A table lists the three categories with their tonnes, share and change over the year. It's built from Slider and Guides. For sustainability reporting and board packs.
FAQ
How do I fill it with my emissions?
Edit CATEGORIES: a label and monthly, the tenths of a tonne of CO2e in each of the 12 months. PATH_START, PATH_END and END_INDEX set the glide path, and MONTHS names the columns. The totals, shares, changes and the sentence are worked out from those numbers.
How is the crossing quarter found?
From the last month, the loop lets gross emissions fall 2.5% a month (MONTHLY_FALL), subtracts a third of the quarterly offset and compares the result with the glide path each month up to December 2030. The first month at or under the path names a quarter, and the first month over it afterwards names the slip. With no offset the net stays above the path, and the sentence says so.
What does the offset slider change?
It draws the net line (the month's total less a third of the quarterly offset) and rewrites the sentence. The columns themselves never change, because offsets do not reduce what you emit. The accessible table lists the glide path and the net value for every month.