Preview Gallery Grid Integration Block for React

They are typed example data in PREVIEWS: a branch, the kind of page it draws, a build state, when it was pushed and its open threads. The counts on the toggle, the tally in the header, the pins on each drawing and the status line are all worked out from that list. Wire it to your own deployments and nothing else needs editing; add a kind to the page drawings if your pages look different.

The cell stays in its place with a quiet tint and its content hidden, so neither the grid nor the page changes height and nothing jumps. The status line says how many of the previews are showing and which state they are in. Keyboard and screen reader users get the same: hidden cells are removed from reading order.

No. Each is drawn from greyscale boxes in a browser frame, so it carries no photo, no brand and no colour, and it follows your theme in light and dark. They are decoration and hidden from assistive technology; the cell's text carries the facts.

As an icon and a word: a check and "Ready", a spinner and "Building", a cross and "Failed". The spinner turns only when motion is allowed; with reduced motion it stands still. Vercel creates a preview deployment for each branch you push, and the states here are the example's own labels.

Everything: the filter is page state and nothing is read from or sent to Vercel. The status line says so from load.

Two cells across on a phone, three from a wide screen, the toggle wrapping above the tally. In a right-to-left layout the cells run from the end and the pins mirror with the drawing; branch names keep their own direction. The header fades up once on load, and reduced motion turns that off.