shadcn.io is not affiliated with official shadcn/ui
Carbon Offset Checkout Block for Ark UI
An estimated parcel footprint from a typed shipping distance, drawn as a stacked bar with a table of kilograms and shares, and a switch that adds an offset priced in cents from one of two invented programmes; every factor is typed and labelled an estimate.
Installation
Overview
Offer an offset without overclaiming, with this carbon offset checkout for React with Ark UI. A compact header from Peregrine Trail, a hiking-boot shop, sits over a hairline frame with a plus mark on each corner and a side cell. In the main cell you type a shipping distance in kilometres into an Input, from 1 to 20,000, and the parcel's footprint is drawn as a stacked bar of making, shipping and packaging, with a native table under it giving each part in kilograms and its share; the shares always add up to exactly 100 (largest remainder). A line says the factors are typed for this demo and are an estimate, not a measurement. The side cell has a Native Select of two invented offset programmes, each with a rate per tonne, and a Switch, "Add the offset: $0.61", whose price is the estimate times the rate, rounded up to the cent. The order total counts up (Counting Number) and the foot has Continue to payment, the only Shine Button. No claim is made about what an offset does. For footwear, furniture and anything shipped far.
FAQ
How is the footprint estimated?
From three typed numbers in grams of CO2e: 11,800 for making the boots, 900 for packaging, and 4 for each kilometre the parcel travels. At 1,240 km that is 4,960 for shipping and 17,660 grams in all, shown as 17.7 kg. They are examples chosen for this demo, not measurements; replace MAKING_GRAMS, PACKAGING_GRAMS and GRAMS_PER_KM with figures from your own carrier and product data.
How is the offset priced?
Grams times the programme's rate per tonne, divided by a million, rounded up to the next cent, all in whole numbers so there is no floating-point drift. At $34.00 a tonne, 17,660 grams costs $0.61. Changing the distance or the programme changes the price on the switch's label, and the status line says what it became. The two programmes and their rates are invented.
Why do the shares always add up to 100?
Rounding each part separately can give 99 or 101. The helper sharesOf gives every part its rounded-down share and hands the missing points, one each, to the parts with the largest remainders, so the bar, the table and the sentence under the bar always agree.
What happens when the distance is wrong?
The field takes digits only and shows a problem line, always reserving its space, when the number is under 1 or over 20,000: "Enter a distance from 1 to 20,000 km." The estimate treats an empty field as 0 km and caps a larger number at 20,000 until you correct it. The field has autocomplete off.
How is the bar drawn, and is it readable without colour?
It is one SVG of three rectangles in foreground weights, so it follows the theme and needs no colour, with a small gap between parts. It is hidden from assistive technology because the table under it holds the same numbers with each part's name, and a caption under the bar says the shares in words.
What stays local in the demo, and how do I wire it up?
Everything. The switch only changes the total on the page, nothing is purchased, and no programme is contacted. In your app, price the offset on the server from your shipping provider's real distance and a registry you trust, put it on the order as its own line, show a failure in the status line, and make Continue to payment a link to your next step: wrap an a element in the Shine Button with asChild.