shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Answer "will it run on my cable" with this monitor product card for React with React Aria. A Toggle Group picks HDMI, DisplayPort or USB-C and a table lists four modes, from 4K at 144 Hz to 1080p at 360 Hz, each with "Yes" or "No" as a glyph and a word. The best mode for that cable is marked and named under the table. A side cell with a plus mark on each corner draws the monitor with its price and an outline Button that turns into "Added" with an Undo; the "Bag" count follows. On a phone the table comes first, then the monitor. Guides rule the bands. For monitors, docks, cables and any product whose limits depend on what you plug in.
FAQ
How do I change the modes?
Edit MODES (the four modes, best first) and CABLES, where each cable lists which modes it carries. The best mode is the first one the cable carries.
Are these real limits?
No. The matrix is typed for this demo. A real product reads it from its specification.
What stays local, and how do I wire it for real?
The cable and the bag are page state; nothing is stored, charged or sent. Replace add and undo with calls to your cart.
Why a plain table?
The table is native HTML with a hidden caption and row headers, so it reads the same on every library; it sits in a focusable region so it can scroll sideways at 320 px.
