Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Preview Gallery Grid Integration Block for Svelte

An integration grid section for a preview-review tool listing Vercel previews: a toggle that filters by build state, a derived tally, and six cells in shared hairlines, each with a drawn page, its branch, build state and open threads.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration grid section for Svelte with Ark UI, written for Stagehouse, a fictional tool for reviewing preview deployments, and its Vercel connection. A compact header carries the mark pair at its end. Under a band rule, a toggle filters the previews by build state (All, Ready, Building, Failed), each option with its count worked out from the data, beside a tally of previews and open threads and a polite status line that is in the page from load. Then six previews sit in a 3 by 2 of cells that share their hairlines, two across on a phone. Each cell draws its page from greyscale boxes in a small browser frame, never an image, with a pin on the page for each open thread; under it come the branch in code, the build state as an icon and a word, and the open threads with when it was pushed. A filter keeps every cell where it is: the ones it hides go quiet and empty, so the block never changes height. Nothing is read from Vercel. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides and Toggle Group with CSS drawings and your theme's tokens for every colour. Vercel is named in text only: no Vercel logo, colour or wordmark ships with the block. The previews are example data.

FAQ

Where do the previews come from, and how do I change them?

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.

What does a filter do to the cells it hides?

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.

Are the page pictures real screenshots?

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.

How is the build state shown without colour?

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.

What stays local?

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

How does it behave on a phone and in right-to-left layouts?

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.

All 100 integration blocks