shadcn.io is not affiliated with official shadcn/ui
Variant Matrix Gallery Block for Solid
A native table of drawn mugs by glaze and size, where hovering or focusing a cell lights its row and column heads and the cells between them, and choosing a cell writes its stock in a status line that keeps its height.
Installation
Overview
A variant matrix for Solid with Ark UI. A centred header sits over one native table, rail to rail: three glaze rows (Graphite, Stone, Bone) by four size columns (S to XL), every cell a drawn mug at its size and in its glaze with the stock under it in words. Hover a cell or tab to it and the row head and column head light up, and so do the other cells in that row and column, which shows exactly what you are choosing. Choosing a cell writes "Stone, L, 12 oz: in stock" in a polite status line under the table. Row heads are th scope="row" and column heads th scope="col"; on a phone the table scrolls sideways while the glaze names stay in view. The mugs are drawn in the theme's greys. It's built from Guides and a native table. For product pages with two options and any grid where rows and columns both mean something.
FAQ
Why a real table?
Two axes are a table's job: a screen reader announces the glaze and the size for every cell, the caption names the matrix, and the scope attributes tie each cell to its heads. The table is a native one on every base, with the cells as buttons.
What lights up when I point at a cell?
The row head and the column head take a darker solid tone, and the other cells in that row and column take a lighter one. It follows the pointer and keyboard focus alike, and clears when either leaves.
What does choosing a cell do?
It marks the cell aria-pressed and writes its glaze, size, ounces and stock into the status line. Nothing is sent anywhere; hook the choice to your cart. The stock figures are example data.
Which keys work?
Tab visits the cells in reading order, row by row. Enter or Space chooses. When the table is wider than its frame, the frame itself takes focus so the arrow keys can scroll it.
How do I use my own photographs?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change. The mugs are the mug scene, sized by a number from 0 to 1; with photographs, scale each in its cell the same way.