shadcn.io is not affiliated with official shadcn/ui
Image Preview Changelog Block for React Aria
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.
Installation
Overview
A thumbnail changelog for React with React Aria, 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.
A preview trigger wraps the link and a popover that holds the card.
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.