shadcn.io is not affiliated with official shadcn/ui
Screenshot Gallery Changelog Block for Svelte
A changelog contact sheet: two releases as framed sheets of three drawn thumbnails each, a settings panel, a table and a chart card, and each thumbnail opens a dialog with the screen larger and its caption.
Installation
Overview
A screenshot changelog for Svelte with Ark UI, written for Shotmoor, a fictional visual QA tool. A start-aligned header counts the screens from the data, then each of two releases is one framed sheet whose lines run a little past its corners: the release's title, version, day and type tag in a head, and three thumbnails on shared hairlines under it, two across on a phone with the third spanning both. The thumbnails are drawn in the theme's greys from plain shapes (a settings panel, a table, a chart card), never photographs. Each thumbnail is a button that opens a dialog with the same screen larger, its caption and a sentence on what changed, and closing returns focus to the thumbnail that was opened. It's built from Guides, Dialog, Badge and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For design-heavy products and visual release notes. The releases are example data.
FAQ
How do I change the releases and screens?
Edit RELEASES at the top of the file, newest first. A release has a version, an ISO date, a kind and three shots; a shot has a caption, a note for the dialog, a kind (settings, table or chart) and a seed, any whole number, which varies the bars, rows and toggles of its drawing. The count in the header comes from the shots.
How do I use real screenshots?
Replace the Screen helper with an img that has real alternative text, and keep the rest. Thumbnails and the dialog both draw through Screen, so one swap changes both. The drawings here are decoration, hidden from assistive technology, because the caption and the dialog's sentence already say what each screen shows.
How does the dialog work with a keyboard?
A thumbnail is a real button: Enter or Space opens the dialog, Escape or the close button shuts it, and focus returns to the thumbnail you opened. The dialog's title is the screen's caption and its description is the sentence on what changed.
How does it fit on a phone and in a right-to-left layout?
The thumbnails go two across with the third spanning both, so nothing scrolls sideways at 320 pixels, and the dialog sits at the foot of the screen. A drawing never mirrors, because a screenshot does not, but the sheets, heads and captions do.