shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let shoppers pick a configuration with this laptop product card for React with React Aria. A hairline frame with a plus mark on each corner holds three build rows, Base, Plus and Max, between shared hairlines. Each row is one radio with its memory and storage chips, three short bars for memory, storage and battery drawn on a scale shared by the three rows, and its price. A foot band draws the laptop and lists the ports of the chosen build, and the one Shine button reads "Add Plus, $1,499" and follows the choice. Add turns into "Added" with an Undo, the "Bag" count follows and one polite line says what changed. On a phone the rows stack and keep their bars. Guides rule the bands. For laptops, tiered hardware and any product sold in a few fixed builds.
FAQ
How do I change the builds?
Edit BUILDS: each has a name, memory and storage in gigabytes, battery hours, a price in cents and its ports. The bars, chips and button label are worked out from these.
Why are the bars the same length across rows?
Each measure takes the longest value of the three builds as full, so Max fills all three bars and the others show how much less they have.
Why does the port list not move the page?
All three lists sit in one grid cell; the unchosen ones are invisible and inert, so the band keeps the height of the longest.
What stays local, and how do I wire it for real?
The chosen build and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart and send the build id.
