Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Feature Spotlight Changelog Block for React

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.

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 release spotlight for React with Base UI, written for Spotbeam, a fictional collaborative docs editor. A split on a hairline divider: at the start a drawn greyscale editor in a corner frame (a document with a title bar and a presence stack of three people, a toolbar, a heading, two cursors with named flags and one shaded selection), at the end the release's type tag, version and day, the title as the block's heading, a sentence, a short "Why it matters" list and an outline link to the release notes. Under the split a band, "Also in v3.8", sets four smaller changes in cells on shared hairlines, each with a type tag, a title and a line. The drawing is decoration and hidden from assistive technology, with a caption saying the same in words. On a phone the copy comes first, then the figure, then the cells in one column. It's built from Guides, Avatar, Badge and Button, with your theme's tokens for every colour. The release is example data.

FAQ

How do I change the feature and the extras?

Edit SPOTLIGHT (its kind, version, release, date, title, summary and reasons) and EXTRAS at the top of the file. The band's heading, the cells and the type tags follow. Keep EXTRAS at a multiple of two so the two-column layout has no empty cell, or a multiple of four for the wide one.

Where does a real screenshot go?

Replace EditorDrawing with your own figure, keeping the figure and its figcaption. The drawing is built from shapes, text-colour tints and the catalog's Avatar, so it follows the theme in light and dark; a real image would need two versions to do the same.

What does a screen reader hear?

The type tag, version and day, then the title as the block's heading, the sentence, the "Why it matters" heading and its list, and the link. The drawing is hidden; the figure's caption says what it shows ("Two people editing one paragraph…"). The band is a heading followed by a list of four items, each with its own small heading.

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

Below lg everything stacks in one column with a hairline between the copy and the figure, and the link goes full width. In a right-to-left layout the split mirrors: the figure moves to the other side of the divider, and the drawing itself stays left-to-right, because a document is read that way.

What moves, and what happens with reduced motion?

The two halves fade up once on load. With reduced motion they appear at once. Nothing else moves.

  • Pro

    Announcement Banner Changelog

    Spotlights and media

    A release announcement for a product-announcement tool: the latest release as the headline with three audience tabs that change its highlights and a Shine Button, and behind a split divider an Earlier list of the three releases before it.

  • 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

    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.

  • Pro

    Plain and Technical Customer Changelog

    Roadmap and customers

    A release list for a clinic booking product that tells each of three releases in two wordings, switched in place by a Plain / Technical control at the header's end.

  • Pro

    Category Sections Changelog

    Filters and browsing

    A changelog for a file organiser grouped under Added, Improved and Fixed headings, with a sticky index of the three sections beside them and every change tagged with the release it shipped in.

All 200 changelog blocks