shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show what is in a product, not just what it claims, with this beauty product card for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three tiles, a hand cream, a lip balm and a body butter, each marked at its own corners by Guides. A tile has a drawn greyscale jar, stick or tub, the name and size, four ingredient chips, a "Free from" line, the price and an outline Button that says "Add to bag". Each chip is a button that opens a Popover: one sentence on what the ingredient does, its share of the formula in percent and a gentleness of one to three dots. 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. On a phone the tiles are a row you swipe, with the next one showing. For skincare and cosmetics shops that want to show the formula on the shelf.
FAQ
How do I change the ingredients?
Edit RANGE. Each product has four ingredients, each with a name, a does sentence, a share in whole percent and a gentle score of 1 to 3, plus a free list for the "Free from" line. The shares and scores are typed here; in a real shop they come from the formula sheet.
Are the shares and gentleness real?
No. They are made-up figures for a fictional brand, and the popover says so. The block makes no claim about treating or curing anything; the sentences only say what an ingredient is for in a formula.
How does the popover work with the keyboard?
Each chip is a native button. Enter or Space opens its popover, Escape closes it and focus returns to the chip. The popover has a title, so it is announced by name. Only one is needed at a time, and opening a second closes the first.
What stays local, and how do I wire it for real?
The bag and the status line are page state; nothing is stored, charged or sent. Replace the bodies of add and undo with calls to your cart. The pictures are typed shapes: swap Picture for an img of each product.
