shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let a buyer see the personal touch before it is made with this handmade product card for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a mug, drawn in greyscale inside its own framed box, that writes the name you type onto its side in SVG text, up to 12 letters, with the letters set smaller as the name gets longer. A Toggle Group swaps a classic serif for a plain sans face, a Hover Card on "Made by the studio" tells the maker's story, and four craft steps (thrown, dried, glazed, fired) are an ordered list. A list gives the price (the mug plus $6 to personalise), when it ships (in stock in 2 days, or made to order in 5 once it has a name) and the total, and the block's one Shine Button says "Add to bag" with an Undo. Nothing is stored or bought. On a phone the mug comes first. For makers, studios and any product made to order.
FAQ
How do I change the price and the lead time?
The mug and the personalising fee are MUG_CENTS and NAME_CENTS in integer cents. The two lead times are in shipsWords, and the craft steps are the typed STEPS list.
What can be typed?
Letters, spaces, hyphens and apostrophes, up to 12; anything else is dropped as you type. The size of the letters comes from the length, so a long name stays on the mug.
Does the hover card work without a mouse?
Yes. It opens on keyboard focus and on a tap as well as on hover, and everything it says is also in the lead-time row, so nothing depends on it.
What stays local, and how do I wire it for real?
The name, the face and the bag are page state. The bag is page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart. The picture is typed shapes: swap Picture for an img of the product.
