Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Category Browser Changelog Block for React

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.

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 changelog category browser for React with Base UI, written for Stickerbook, a fictional chat app. A centred header sits over six cells, three by two, each a topic of the changelog: Stickers, Reactions, Groups, Search, Calls and Privacy. A cell has a line icon on a plate (never an emoji), the topic's name as its one link, how many entries it holds and the title, version and date of its newest entry. The whole cell takes the hover and the focus ring. It's built from Guides and lucide icons, with CSS transitions for the entrance and your theme's tokens for every colour. For apps with many kinds of change that want readers to pick a topic first. The topics and entries are example data.

FAQ

Why does a block named emoji use icons?

The slug keeps its URL. The cells use drawn line icons instead of emoji, so they look the same on every device and follow your theme's colour.

How do I change the topics?

Edit TOPICS: an id, a name, an icon from lucide, a count, and the newest entry's newest title, version and ISO date. The total in the header is computed from the counts. Dates are fixed, never computed from today.

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

On a phone the cells are two columns of square hairline boxes; from sm each cell draws its own overshooting hairlines. In a right-to-left layout the cells mirror and the arrow turns.

What moves, and what happens with reduced motion?

The header and the content fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears.

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

  • 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

    Filterable Changelog

    Filters and browsing

    The plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.

  • Pro

    Grouped Date Changelog

    Lists and timelines

    Changes grouped by the day they shipped: each day has a drawn calendar tile (month, big day number, weekday) beside a dated heading and its changes with a type tag, a sentence and the release.

  • 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

    Color Coded Changelog

    Lists and timelines

    A changelog for a palette tool whose five kinds of change are coded without colour: a pattern strip, an icon and a word each, with a legend that dims the other rows in place.

All 200 changelog blocks