shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let shoppers shorten a routine and see what it costs and how long it takes with this skincare routine card for React with Ark UI. A hairline frame with a divider holds, at the start, a drawing of the set's bottles in a row, a short list of facts (steps, total, time) and the one Shine Button that adds the routine to the bag. At the end, Tabs switch between AM and PM. Each tab lists its steps in the order you apply them, Cleanse, Tone, Serum, Moisturise and, in the morning, Sun cream, with an Include Checkbox, the seconds it takes and a wait note. Unticking a step outlines its bottle, and the total price (worked out in cents) and the minutes follow. The evening has four steps, so a quiet note holds the fifth row's place and nothing moves. Nothing is stored or bought. For skincare sets and any kit sold as a sequence.
FAQ
How do I change the steps?
Edit MORNING and EVENING. A step has a cents price, the seconds it takes to apply and the wait before the next one. The price, the time and the bottle drawing all come from those fields.
How is the time worked out?
It adds the application seconds and the waits of the ticked steps and prints them as minutes and seconds. It is an estimate typed for this demo.
Do the two tabs share their ticks?
Each tab has its own steps and keeps its own ticks while you switch. Changing a tick after you have added the routine clears the Added state and says so, because the set is no longer what was added.
What stays local, and how do I wire it for real?
The ticks, the tab and the bag are page state; nothing is stored, charged or sent. Replace the body of addRoutine with a call that adds the ticked step ids to your cart. Swap the typed bottles for images.
