Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Screenshot Gallery Changelog Block for React

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.

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

A screenshot changelog for React with Base 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.

What moves, and what happens with reduced motion?

The header and the first sheet fade up once on load, and a hovered thumbnail gains a soft shadow. With reduced motion those transitions and the dialog's own entrance are off.

  • Pro

    Image Preview Changelog

    Spotlights and media

    Six releases as figures, each with a drawn greyscale thumbnail of what shipped (a table, a dialog, a chart, a menu, a calendar, a settings form) and a caption; resting on a thumbnail opens a larger copy in a card.

  • Pro

    Before After Changelog

    Spotlights and media

    A compare slider for a design-handoff tool's release: one drawn editor window, its fourteen cramped toolbar icons before and three labelled groups after, under a draggable divider that also answers the arrow keys, with a short table of what changed.

  • Pro

    Video Walkthrough Changelog

    Spotlights and media

    A changelog of release walkthroughs as drawn posters in a row of three cells, each opening a dialog with the poster, a scrubber, a chapters list of timestamp buttons and the chapter's transcript.

  • Pro

    Scrolling Screenshot Gallery

    Stage and thumbnails

    A tall landing page drawn in code and shown in a fixed-height browser window that a Scroll preview button plays down, a slider scrubs and an index of five sections jumps.

  • Pro

    Phone Frame Carousel Gallery

    Carousels and slides

    Five app screens drawn in phone frames in a ruled band, the chosen one centred at full strength with its neighbours peeking in veiled, steered by a row of five feature tabs under a compact header.

  • Pro

    Lightbox Gallery

    Stage and thumbnails

    Nine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.

All 200 changelog blocks