Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Stakeholder Summary Changelog Block for React

A split with three business figures that recompute for a chosen team, and three releases in plain language with the teams they affect as chips.

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 business summary for React with Base UI, written for Execbrief, a fictional product-operations tool. A split behind a divider that runs from the spine's top rule. At the start a header whose title is worked out from the data ("Three releases, $450k more a quarter"), a toggle group that picks a team (Everyone, Sales, Support, Finance) and three figures as a list of terms: revenue impact, tickets avoided and median adoption, each rolling to its new value. At the end the three releases as an ordered list, newest first: the version and its day, a plain-language headline, one sentence on the benefit and the teams it affects as chips. It's built from Toggle Group, Badge, Sliding Number and Guides, with your theme's tokens for every colour. For executive updates and stakeholder reviews. The figures are example data.

FAQ

How do I change the releases?

Edit RELEASES (newest first). Each has a headline, a benefit sentence, the teams it affects, its day and three readings: revenue in thousands of dollars a quarter, tickets avoided a month and adoption after 30 days. Nothing is typed as a total: the sums, the median and the title are worked out from the releases in view.

What does the team toggle do?

It picks a team. The releases that reach it keep full weight and its chip is filled, the others turn quiet, and the three figures are recomputed over the releases that reach it (revenue and tickets as sums, adoption as the median). The figures roll to their new values and a polite line says which releases are counted. The page never moves, and the choice stays local.

Why is adoption a median?

Percentages from different releases can't be added. The median of the releases in view is a fair single number, and the caption under the figures says which releases it counts and that revenue and tickets are sums.

How does a screen reader hear the figures?

The rolling digits are decorative and hidden. Each figure also has a plain sentence for assistive technology ("224 thousand dollars more a quarter"), and the releases are an ordered list with a heading each.

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

Below the desktop width the figures come first and the releases under them. Figures, versions and dates keep their reading order in a right-to-left layout, while the text, chips and rows mirror.

  • 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

    Customer Impact Changelog

    Roadmap and customers

    Three customer-facing issues as tabs; each panel shows the issue's reach on four plan tiers as text and a bar, how it ended, and a total counted from the data.

  • Pro

    Monthly Digest Changelog

    Filters and browsing

    Month pills with entry counts above a framed panel that groups the month's entries by type, with a Copy button that puts the whole digest on the clipboard as plain text.

  • Pro

    Year in Review Changelog

    Metrics and charts

    A year of releases behind a split divider: the total in large digits with a Changes or Releases switch, and four quarter rows with their headline release and a bar scaled to the busiest.

  • Pro

    Sprint Summary Changelog

    Roadmap and customers

    An iteration picker over a velocity band (points, tasks, completion with a progress bar) and the iteration's entries in three columns, New, Improved and Fixed.

  • Pro

    Team Contributions Changelog

    Contributors

    Four team cells, Frontend, Backend, Platform and DevOps, in a two-by-two grid of overshooting hairlines, each with its people, its change count and its changes, ordered by most changes or by name.

All 200 changelog blocks