shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Answer the question buyers actually ask with this candle product card for React with Radix UI. A Segment Group picks 4, 9 or 16 oz and a Slider named "Lit per evening" sets 1 to 6 hours; the card writes "Lasts about 27 evenings" by dividing the size's typed burn hours by the hours lit. A candle drawn in its jar at the end marks where the wax stands after evening 7, 14 and 21, and the same three points are listed in words. One Shine Button adds the candle at the size's 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 candles, diffusers, refills and anything that is used up over time.
FAQ
How do I change the sizes?
Edit JARS: each has a label, the burn time in hours, the price in cents and the drawn jar height. Evenings are the burn hours divided by the hours lit, rounded down.
What do the marks on the jar mean?
Each line shows where the wax stands after evening 7, 14 or 21 at your hours per evening. A mark you would never reach is hidden and its row says the wax is used up.
Is the burn time a promise?
No. It is a typed figure for the demo; real burn times vary with the wick, the room and trimming. Use your tested figures and say so in your copy.
What stays local, and how do I wire it for real?
The size, the hours and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart.
