Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Image Preview Changelog Block for React

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.

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 thumbnail changelog for React with Base UI, written for Stampwell, a fictional screenshot tool. A start-aligned header over six cells in two columns, newest first, each inside a corner frame that overshoots a little like a contact sheet. A cell is a figure: a 16:10 thumbnail drawn in greyscale from shapes (a table with a selected row, an export dialog over a dimmed page, a bar chart, a menu, a month grid, a settings form with switches) beside its caption, with the type tag, the title, a sentence, the version and the day. On a wide screen, resting on or focusing a thumbnail opens a card with the same drawing larger, the title and the version; on a phone the card never opens and the thumbnail is just a link. There are no photos: the drawings scale from one definition, and a comment marks where a real screenshot would go. The drawings are decoration, hidden from assistive technology, because the caption says the same in words. It's built from Guides, Badge and Hover Card, with your theme's tokens for every colour. The releases are example data.

FAQ

How do I change the releases or the pictures?

Edit RELEASES at the top of the file, newest first: each has a version, a date as an ISO day, a title, a summary, a kind and a picture (table, dialog, chart, menu, calendar or settings). To draw another picture, add a component of shapes sized in cqw units and one line to Picture, so it scales with its box in both the thumbnail and the card.

How do I use real screenshots?

Put an img with its alt text where Picture is drawn, in the thumbnail and in the card, and keep the figure and its caption. Give the image the same aspect-[16/10] box so the layout doesn't change, and two versions if it needs to work in light and dark.

How does the preview card work on each library?

On every target the card opens on hover and on keyboard focus after a short delay, closes on Escape, keeps its content out of the page until opened, and is hidden below lg. The thumbnail itself is the trigger of a Preview Card, which renders as the link.

What does a screen reader hear?

Each figure is a link named by its title and version ("Bulk edit for captures, v7.4.0: open the release") followed by the caption: tag, title, sentence, version and day. The drawings and the card's copy of them are hidden or absent, so nothing is read twice.

How does it fit on a phone and in a right-to-left layout?

Below md the cells are one column with a smaller thumbnail and no sentence; below lg the card is off. In a right-to-left layout the thumbnail moves to the start edge and the drawings stay left-to-right, as a screenshot would.

What moves, and what happens with reduced motion?

The header and grid fade up once on load, and the card fades in when it opens. With reduced motion the entrance is off and the card still opens.

  • Pro

    Hover Details Changelog

    Lists and timelines

    Release titles only, until you rest on a row or tab to it: the sentence that explains it then opens with a CSS height transition. Every sentence is open on phones and in the page for screen readers.

  • 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

    Card Grid Changelog

    Spotlights and media

    Six releases of a dashboard builder as a bento of cells on shared hairlines: the newest spans two columns and two rows with a short list, the rest are single cells with a feature icon, a type tag, version, date, title and a Read more link.

  • Pro

    Feature Spotlight Changelog

    Spotlights and media

    One release with its headline feature in the spotlight: a drawn greyscale editor with two named cursors beside the title and why it matters, and a band of four smaller changes underneath.

  • Pro

    Category Browser Changelog

    Filters and browsing

    A three-by-two browser of changelog topics: each cell has a drawn icon, the topic's name as its link, an entry count and its newest entry with version and date.

  • Pro

    Release Timeline Changelog

    Lists and timelines

    A release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.

All 200 changelog blocks