shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show the keys you are buying with this keyboard product card for React with React Aria. A hairline frame with a plus mark on each corner holds a keycap grid drawn from typed row layouts and, in a side cell, a Segment Group for the layout (60%, 75%, TKL) and a Toggle Group for the switch (Linear, Tactile, Clicky). Changing the layout redraws the keys (61, 82 or 87, counted from the rows) and re-prices the board in integer cents; changing the switch rewrites three feel meters, actuation force in grams, key travel in millimetres and a five-dot sound level. On a phone the key grid comes first. The single Shine Button says "Add to bag" with the price and turns into "Added" with an Undo; a polite status line says what changed. Nothing is stored or bought. For product pages where the choice is easier to see than to read.
FAQ
How is the keycap grid drawn?
Each layout is a list of row strings in LAYOUTS, such as 1.5 1x12 1.5 for a row that starts and ends with a wide key and holds twelve normal ones. A number is a key's share of the row, 1x12 repeats it and _3 leaves a gap. The key count shown is counted from those rows, so it cannot drift from the picture.
What do the meters show?
Three typed numbers per switch in SWITCHES: actuation force, travel and a sound level of one to five. The bars share one scale, grams out of 80 and millimetres out of 5, so switches compare at a glance.
Which keys move between the options?
Arrow keys move inside each group and Space or Enter picks. The switch group always keeps one pressed; the layout group is a single choice too.
How does the price change?
Each layout has its own price in cents in LAYOUTS. The switch does not change the price here; add an extra to a switch and add it in centsOf if yours does.
