shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show what a thicker product costs you with this yoga mat product card for React with Radix UI. A Segment Group picks 3, 5 or 6 mm; the mat is redrawn as a side-on slab with a knee pressing into it, sinking deeper as the mat gets thicker, and three five-dot meters (cushion, stability, packed size) trade against each other. Weight, rolled width and the price follow the thickness, all typed. One Shine Button adds the mat at that price. Guides rule the bands. Add turns into "Added" with an Undo, the heading row's "Bag" count follows and a polite status line says what changed. Nothing is stored or bought. For mats, pillows, mattresses and anything where more of one quality costs another.
FAQ
How do I change the thicknesses?
Edit THICKNESSES: each has a label, millimetres, the three meter values from 1 to 5, the knee sink in millimetres, weight in tenths of a kilogram, the rolled width and the price in cents. The slab is drawn at three units a millimetre.
Why do the meters trade against each other?
A thicker mat is softer and bulkier but less steady underfoot, so cushion and packed size rise while stability falls. The values are typed so you can set your own.
Are the dots the only way to read a meter?
No. The dots are decoration; each meter also has a text value such as "4 of 5" that screen readers read, and the status line reads all three when you change the thickness.
What stays local, and how do I wire it for real?
The thickness and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart.
