shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let shoppers build the thing they buy with this customizable product card for React with Ark UI. A lamp is drawn at the start of a framed panel and redraws with each choice: a cone, drum or globe shade, a base in one of three grey steps, and a 1.5 m or 3 m cord. Three Toggle Groups hold the choices, and a side cell lists the build as a description list: base, shade, cord, SKU and when it ships, then the total. Every price is typed in integer cents and the total is the sum, so the list and the button always agree. A globe on a Graphite base is made to order, which changes the ship time. The one primary is a Shine Button, "Add to bag, $114", with a ghost Reset beside Undo. On a phone the lamp comes first and the choices follow. Nothing is stored or bought.
FAQ
How do I change the options and the prices?
Edit SHADES, BASES and CORDS. Each option has a cents price, a code for the SKU and a name; the base carries the starting price and the shade and cord add to it. The total, the SKU and the ship time come from totalOf, skuOf and shipsWords.
How is the lamp drawn?
From SVG paths at module scope: SHADE_PATH and SHADE_RIB per shade, BASE_FILL per base step and CORD_PATH per cord length. It follows the theme. To use real renders, swap Lamp for an img per combination.
Why does the ship time change?
A typed rule: a globe shade on the Graphite base is made to order and ships in 14 days; every other build is in stock and ships in 3 days. Replace madeToOrder with a check against your inventory.
What stays local, and how do I wire it for real?
The build and the bag are page state; nothing is stored or charged. Replace the body of add and undo with calls to your cart and send the SKU, not the label.
