shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let the buyer see what a refill saves with this sustainable product card for React with React Aria. A hairline frame holds the product at the start: a drawn greyscale bottle or refill pouch, its name, price and a Switch called "Refill pouch instead of a new bottle", with an outline Button to add it. At the end, a side cell rewrites the figures when you flip the switch: plastic in grams, the price, and the price per litre, each against the other option, with a line such as "Saves 84 g of plastic and $5." The plastic is the sum of the plastic parts in the materials list, which opens in a Collapsible. Certifications are plain words, not popovers. For refill programmes and any product that has a lighter version of itself.
FAQ
Where do the numbers come from?
From the typed Option records. Each option lists its parts in grams and marks the plastic ones; the plastic figure is the sum of those, the saving is the difference between the two options, and the price per litre is worked out from the price and the volume. Nothing is typed twice.
Are the certification lines real?
No. They are typed sentences in this demo. In a real product, state only what you can document, name the body that checked it, and link the evidence.
Does the card change height when I flip the switch?
No. The materials list sits over an invisible copy of the longer list, so the card keeps its size when the pouch has fewer parts, and the saving line reserves two lines.
What stays local, and how do I wire it for real?
The switch, the bag and the open materials list are page state; nothing is bought or stored. Replace the bodies of add and undo with calls to your cart and the Option records with your catalogue.
