shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Compare handsets at a glance with this phone product card for React with React Aria. A hairline frame with a plus mark on each corner holds three Moonrow tiles between shared hairlines. Each tile draws a greyscale handset, then three short bars for battery, screen and main camera whose lengths share one scale across the row, so the longest in each measure fills its bar. A Toggle Group per tile picks 128, 256 or 512 GB and re-prices that handset in 100 dollar steps; "From" in the heading row is the lowest price. An outline Button turns into "Added" with an Undo, the "Bag" count follows and one polite line says what changed. On a phone the row scrolls sideways with the next tile showing. Guides rule the bands. For phone ranges, plan comparisons and any row of products that differ in a few measures.
FAQ
How do I change the handsets?
Edit HANDSETS: each has a name, meta, base price in cents, battery hours, screen in tenths of an inch, camera megapixels, an alt sentence and the shapes that draw it. The bars and "From" are worked out from these, so they always agree.
How do the bars share a scale?
Each measure takes the longest value in the row as full and shows the others as a whole percent of it, so a bar compares across tiles, not within one.
How is the price worked out?
The base price is for 128 GB; each step up adds STEP_CENTS. All money is integer cents formatted by one money helper.
What stays local, and how do I wire it for real?
The chosen storage and the bag are page state; nothing is stored, charged or sent. Replace the bodies of add and undo with calls to your cart, and send the handset id and storage with them. Swap Picture for an img of each handset.
