shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Turn a price into a cost per day with this supplement product card for React with Ark UI. A hairline frame with a divider holds the tub, drawn in greyscale, with its price and a fixed list of label facts at the end, and the plan at the start. A Toggle Group picks Maintenance (1 capsule a day) or Active (2 a day): it sets how many days the 120-capsule tub lasts and the cost per day, both worked out in integer cents. A week of dots draws the doses, morning and evening. A Switch takes 10 percent off for a subscription and the cost per day follows. The one Shine Button adds the tub to the bag. Values are typed from the label and are not medical advice. Nothing is stored or bought. For supplement and refill shops.
FAQ
How do I change the plan?
Edit PLANS, TUB_CAPSULES, TUB_CENTS and OFF. The days are the capsules divided by the capsules a day, and the cost per day is the price in cents divided by the days, rounded once.
Does it make health claims?
No. It states an amount per capsule as a label fact, plans in capsules a day, and says the values are typed and not medical advice. Add your own regulated wording and amounts if you sell a real product.
Does the switch set up a subscription?
No. It only changes the price shown and says nothing is scheduled. Wire flip to your subscription flow.
What stays local, and how do I wire it for real?
The plan, the switch and the bag are page state; nothing is stored, charged or sent. Replace the bodies of add and undo with calls to your cart.
