shadcn.io is not affiliated with official shadcn/ui
Product Sustainability Storefront Block for React Aria
A product footprint panel for a pair of boots: three materials with recycled-content bars and kg CO2e, and a years-kept slider that divides the total per year and compares it with a typical pair.
Installation
Overview
Say what a product costs the climate, and how that changes with the way it is used, with this sustainability panel for React with React Aria. A header names the Fell boot from Thorn & Thistle. A hairline frame with a plus mark on each corner holds two cells. The first lists the three materials (upper, sole, lining and laces) with a bar for the share of recycled content, the footprint in kg CO2e and a total row that adds the footprints, weighs the recycled share by grams and gives the weight. The second holds a Slider for the years you will keep the boots, from 1 to 10: it divides the total by the years, draws the result against a typical boot kept 3 years in two bars, and says in a sentence whether it is less or more per year. Kept for one year the boots cost more per year than the typical pair, and the page says so. A note under the frame states that these are estimates from typed data, not a certified assessment. It's built from Slider and Guides, with CSS widths and a CSS entrance only. For a product page's impact section, a materials breakdown or a repair-and-care promise.
FAQ
How do I fill it with my product?
Edit MATERIALS and TYPICAL. Each material has a name, a note, its weight in grams, its footprint in tenths of a kg CO2e and its recycled percentage. The total, the recycled share (weighed by grams), the per-year figure and the comparison are all worked out from those numbers, so nothing is typed twice.
Why does it show a case where the product looks worse?
The footprint is paid once, so a short life spreads it over few years. At one year the boots cost 18.0 kg a year against 8.7 for the typical pair, and the sentence under the bars says "more". Showing that is the point of the slider: the claim is about keeping them, not about owning them.
What stays local, and how do I wire it to real data?
The footprints are sample figures typed in the file and dated 9 October 2026. Replace them with the values from your life-cycle assessment or your supplier's declarations and keep the note that they are estimates. The slider only changes what the page shows; nothing is stored.
How does it look on a phone?
The two cells stack, materials first, then the slider and its comparison. The comparison bars and the sentence keep their size as the slider moves, so the page does not jump.
How does the slider work with a keyboard and a screen reader?
It is a real slider: the arrow keys move one year, Home and End jump to 1 and 10, and its value is read as "5 years, 3.6 kg CO2e a year". The sentence for the new value is announced once you stop moving, from a polite status line, so a screen reader is not read every step.