shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let shoppers build the machine on the card with this gaming PC product card for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a greyscale tower whose memory sticks follow the memory tier and, in a side cell, four native selects, one each for the graphics card, the processor, memory and storage, with three tiers and their prices. The total is added up in integer cents. Under the rows, three bars show frames per second for an open-world game, a competitive shooter and a racing sim at 1440p, worked out from the graphics and processor tiers by a typed table and labelled as typed estimates for this demo. The single Shine Button says "Add this build" and turns into "Added" with an Undo; a polite status line says what changed. Nothing is stored or bought. For product pages where parts add up.
FAQ
Where do the frame rates come from?
From a typed table, not a measurement. Each game in GAMES has a frame rate for each graphics tier with the middle processor, and CPU_PERCENT scales it for the processor tier. The card says so in words next to the bars. Replace the table with your own benchmark results.
How is the total worked out?
The chassis price plus the price of the chosen tier of each part, all in integer cents in PARTS and CHASSIS_CENTS. Each option in a select shows its own price, and the status line repeats the new total after a change.
Why native selects?
They work on every phone and with every screen reader, keep their value when the page re-renders and need no popup. Each has a visible label tied to it by htmlFor.
Are the bars accessible?
Each bar's number is also written as text ("118 fps"); the drawn bar is decoration on a shared scale of 0 to 300 frames per second.
