shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let shoppers compare flavours before they buy with this chocolate product card for React with React Aria. A hairline frame with a plus mark on each corner holds a five-axis flavour radar (fruity, floral, nutty, earthy, roasted) and a cell with the chosen bars. A multiple Toggle Group at the end of the header picks origins (Madagascar 72%, Ecuador 65%, Peru 55%), at most two: the first pick draws as a solid outline and the second as a dashed one, and a third pick is refused in words, with the status line saying which to turn off first. Under the radar a list gives each bar's cacao, weight and price, and each chosen bar is drawn in greyscale with an outline Button that says "Add to bag" and an Undo. Nothing is stored or bought. On a phone the radar comes first and the bars follow. Guides rule the bands. For chocolate makers and any product that is tasted before it is chosen.
FAQ
How do I change the origins?
Edit ORIGINS. Each has the cacao percent, the five flavour levels from 0 to 5 in the order of AXES, a price in cents, the bar weight in grams and a line of tasting notes. The radar polygons, the list and the bars are all built from those rows.
Why only two at a time?
Two shapes on one radar stay readable; three do not. The limit is MOST. A third pick changes nothing and the status line says to turn one off. Turning the last one off is refused too, so there is always a shape to read.
Can a screen reader get the radar?
The drawing has a text equivalent: its label reads out every level for every chosen origin, and the list under it repeats the facts. The solid and dashed lines are named in the list too, so nothing depends on seeing the line style.
What stays local, and how do I wire it for real?
The chosen origins and the bag are page state. The bag is page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart. The picture is typed shapes: swap Picture for an img of the product.
