Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Linked Issues Changelog Block for React

Two releases as cells that overshoot their lines, each change ending with an issue chip that opens a card with the issue's title, state and assignee, and a foot that counts the issues each release closes.

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 for React with Base UI, written for Ticketthread, a fictional issue tracker. A start-aligned header sits over two release cells whose rules and plus marks run a little past their corners, side by side on a wide screen and in one column on a phone. Each cell has the version in mono, the day and the type tags, a title and a list of changes. Every change ends with its issue as a mono chip with an external-link arrow, a link to the tracker. Pointing at a chip, or focusing it, opens a card with the issue's title, its state (an icon and a word) and its assignee, and the same facts are in the link's name for anyone who never sees the card. A line at the foot of each cell says what it closes, counted from the issues' own states. It's built from Hover Card, Avatar, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For issue trackers, project tools and engineering teams that tie every change to a ticket. The releases, issues and names are example data.

FAQ

How do I change the releases and the issues?

Edit RELEASES at the top of the file. A release has a version, an ISO date, its type tags, a title and changes; a change is a sentence and its issue, which has an id, a title, a state and an assignee. A state is one of two constants, Closed or Open. Dates are fixed, never computed from today.

How is the count at the foot worked out?

From the data. A release closes the changes whose issue is Closed; an Open known issue is listed in the cell but not counted. The line reads "Closes 1 issue" in the singular, so editing the list keeps it true.

How does the card open, and what about keyboards, screen readers and touch?

It opens when you point at a chip. The card is extra: the link's own name already holds the title, the state and the assignee, so a screen reader hears the facts without it, and on a touch screen the chip simply follows its link. Base UI's preview card trigger is the link itself and opens on hover only, so keyboard users rely on the link's name.

How are states told apart without colour?

Each state is an icon and a word: a circle with a check for Closed and a circle with a dot for Open. The card shows the same pair, and the link's name says the word.

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

Below md the cells stack in one column and chips wrap with their sentence. In a right-to-left layout the cells mirror, while each issue id stays left to right.

  • Pro

    Pull Request Changelog

    Code and commits

    Five pull requests as an ordered list rail to rail: number, title, author, a diff size with five squares (solid for added lines, hollow for removed), a state with an icon and a word, and a button that copies the checkout command.

  • Pro

    Commit Log Changelog

    Code and commits

    A git log of seven commits: a short hash with a Copy button for the full one, the commit type as a word, the message, an initials avatar and the day, with a Branch Select that swaps the list.

  • 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

    Customer Request Changelog

    Roadmap and customers

    A "you asked, we shipped" band of four requests, each with an avatar stack, a count of customers and a span bar on one shared axis from the first ask to the release that shipped it.

  • Pro

    Release Blockers Changelog

    Deploys and rollouts

    A verdict header counted from the data with a cleared bar, a toggle group (Open, Cleared, All) and an inset framed table of blockers with owners, states as shapes and words, and the day each was opened.

  • 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