Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Customer Request Changelog Block for React

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.

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 customer-request changelog for React with Base UI, written for Wishlane, a fictional customer-feedback tool. A header counts the customers behind the four requests and the average wait, over a band of rows rail to rail, newest first. Each row names the request, shows an overlapping stack of the first customers who asked with a count of the rest ("214 customers asked"), and draws a span bar on one axis shared by every row, from January to October with a hairline for each month: a hollow dot where the first request came in, a solid dot where it shipped. Under the bar a sentence says "Shipped in v4.1.0, 23 days after the first request" with both days as dates. The days, the bar's position and length and the header's average are all computed from the typed dates. It's built from Guides, Avatar and CSS transitions for the entrance, and your theme's tokens for every colour. For feedback tools and product teams that want to show what customers asked for and how long it took. The requests, counts and people are example data.

FAQ

How do I change the requests and the dates?

Edit REQUESTS at the top of the file. A request has a title, a summary, a version, the firstAsked and shipped days as ISO dates, how many customers asked and the askers shown in the stack. The days it took, the bar and the header's total and average are computed from those, so nothing is typed twice. Change AXIS_START and AXIS_END to move the shared axis.

Why do all the bars share one axis?

So the rows can be compared: a short bar is a quick answer and a long one a long wait, wherever it sits in the year. On lg the months are labelled above the rows; on a phone the bar keeps its month ticks and the sentence under it carries the days.

What does a screen reader get?

The title, the summary, the count ("214 customers asked"), the sentence about the days and both dates as time elements. The avatars and the bar are decoration and are hidden, because the text says the same.

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

On a phone the avatars grow to 40 px, the count sits under them and the bar goes under the request. In a right-to-left layout the rows mirror, while each bar keeps its left-to-right time axis and each count or sentence stays in one piece.

What moves, and what happens with reduced motion?

The header and the band fade up once on load. Nothing else moves, and with reduced motion the entrance is off.

  • Pro

    Feature Request Board Changelog

    Roadmap and customers

    An idea board in a split: a Suggest a feature form beside status tabs with counts and a list of ideas with once-only upvote toggles and comment counts; a submitted idea joins the list locally.

  • Pro

    Feedback Votes Changelog

    Votes and sharing

    Four release notes you can vote on: Yes and No toggles that move a count by one and back, a share bar, and a No that opens a reason field with an honest local Send.

  • Pro

    Community Contributions Changelog

    Contributors

    Four merged pull requests as cells with the title, number, author, a First contribution badge, the merge day and a drawn diffstat, under a header counted from all fourteen.

  • 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

    Roadmap Preview Changelog

    Roadmap and customers

    A roadmap for a planning tool: an accordion of three themes whose rows count their items by stage and open to a list with a stage and a target quarter, beside a framed Now building card with a progress bar, owners and a target.

  • Pro

    Release Range Comparison Changelog

    Filters and browsing

    A split with two release selects, a count of what changed between them as New, Improved, Fixed and Breaking, and the releases in the range as an ordered list.

All 200 changelog blocks