Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Video Walkthrough Changelog Block for React

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.

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 video walkthrough changelog for React with Base UI, written for Lessonwick, a fictional product education tool. A centred header sits over three cells whose frames run a little past their corners, in a row that scrolls sideways and snaps on a smaller screen. Each cell has a drawn poster of the screen (greyscale, with a play mark and its length in a badge), the version and day, a title and a sentence. The title is the cell's one button and stretches over the whole card, which opens a dialog with the poster larger and a scrubber, the chapters as an ordered list of timestamp buttons, and the transcript of the chosen chapter. Choosing a chapter moves the scrubber and the transcript and says so in a polite line. There is no media: the poster is a drawing, and the dialog says so. It's built from Guides, Dialog, Badge and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For product education and release-day explainers. The walkthroughs are example data.

FAQ

How do I change the videos and chapters?

Edit VIDEOS at the top of the file, newest first. A video has a version, an ISO date, a duration in seconds, a title, a summary, a poster kind (timeline, quiz or captions) and its chapters, each with a start at in seconds, a label and a transcript. Times are written as 1:42 by a small helper, and the scrubber is worked out from the chapter's start and the length.

How do I play a real video?

This block plays nothing: the poster is a drawing and the dialog says it plays no video. To play a real one, put your player where the poster is drawn in the dialog, and call its seek method from the chapter buttons. Give the player captions and a text alternative.

How does the dialog work with a keyboard?

The title is a real button inside the heading, so it takes Tab, and Enter or Space opens the dialog. The chapters are buttons too, the current one is marked, and Escape or the close button shuts the dialog and returns focus to the card you opened.

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

Below md the three cells become a row that scrolls sideways and snaps, each about 85 percent wide, so the next one peeks in; above it they sit three across. In a right-to-left layout the cells and chapter list mirror, while timestamps, the scrubber and the poster keep their left-to-right order.

What moves, and what happens with reduced motion?

The header and row fade up once on load, the play mark gets a halo on hover and the scrubber slides when you choose a chapter. With reduced motion those transitions and the dialog's entrance are off.

  • Pro

    Screenshot Gallery Changelog

    Spotlights and media

    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.

  • 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

    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

    Release Banner Changelog

    Spotlights and media

    One release of a documentation platform on one screen: the version large with its day and highlight beside the command that upgrades to it with a Copy button, and a three-cell band of the changes in it, each with a type tag.

  • 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.

  • Pro

    AI Generated Summary Changelog

    Spotlights and media

    A release summarised in three sentences, each ending in numbered citation chips that open the changelog entry they came from, with a sources list, three counted figures and an honest note on who reviewed it.

All 200 changelog blocks