shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Do the arithmetic for the shopper with this wellness product card for React with React Aria. A hairline frame with a divider holds the oil at the start, a dropper bottle drawn in greyscale with a lavender or bergamot choice, its price and an outline Button to add it. At the end is a calculator in two ruled bands. A Segment Group picks the use, Diffuser, Roll-on or Bath, and a Toggle Group picks the amount. A typed rule of 30 drops to a millilitre and a strength per use and oil writes the answer, "Roll-on 10 ml at 2%: 6 drops of lavender", and draws that many drops in a row whose space is always reserved. "Patch-test first" stays in view. The rules are typed, not medical advice. Nothing is stored or bought. For aromatherapy and natural-care shops.
FAQ
How do I change the rules?
Edit WAYS: each has a strength in tenths of a percent for each oil and the amounts offered. The drops are the amount times the strength times DROPS_PER_ML, rounded to a whole drop.
Is this safe advice?
The block is an interface demo. The strengths are typed for a fictional brand and the page says so and says patch-test first. Use your supplier's safety data and a reviewed rule table before you publish a real calculator.
Why does bergamot show a different strength?
It is a typed rule to show how an oil can change the answer: bergamot uses half the skin strength and carries a typed note about the sun. Change or remove it as your data requires.
What stays local, and how do I wire it for real?
The oil, use, amount and bag are page state; nothing is stored, charged or sent. Replace the bodies of add and undo with calls to your cart.
