Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Community Contributions Changelog Block for React

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.

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 community-contributions changelog for React with Base UI, written for Pavemoor v2.8.0, a fictional open-source UI toolkit. The header's sentence is counted from the release's typed list of merged pull requests ("14 pull requests from 9 contributors, 4 for the first time"). Under it four of them are cells whose lines run a little past their corners, one column on a phone and two from sm. Each cell has the title, the number in mono, the author's initials and name with how many of the release's pull requests they merged, a "First contribution" badge where it is their first, the day it merged and a drawn diffstat: five squares, solid for the share added and outlined for the share removed, beside "+120 −14". A ghost link to every merged pull request ends the block. It's built from Guides, Avatar, Badge and Button, with CSS transitions for the entrance. For open-source projects thanking the people who contributed. The people and pull requests are example data.

FAQ

How do I change the pull requests?

Edit PULLS at the top of the file: every pull request merged for the release, each with its number, title, author, the lines added and removed, the merged day and whether it is featured (shown as a cell) and the author's first. The header's counts, the first-time badges and each author's merged count are computed from the list.

How is the diffstat drawn?

Five squares: the share of lines added sets how many are solid (at least one) and the rest are outlined. The numbers beside them, "+120 −14", carry the meaning, and a hidden sentence reads them as "120 lines added, 14 removed". The squares are decoration.

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

On a phone the cells stack in one column. In a right-to-left layout the cells mirror and their lines keep running past the corners, while numbers, versions and the diffstat stay left to right.

What moves, and what happens with reduced motion?

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

  • Pro

    Contributor Leaderboard Changelog

    Contributors

    A framed, sortable table of eight contributors with rank by impact, commits, reviews, an impact bar and a streak; the top three keep a ringed avatar and the headings are buttons that set aria-sort.

  • Pro

    Contributor Stats Changelog

    Contributors

    One segmented share bar of a release's commits by contributor with a counted legend, over the three most recent changelog entries each credited with an avatar and name.

  • Pro

    Author Grouped Changelog

    Contributors

    The twelve changes of one code-review tool's release regrouped by a toggle: by author, each cell a person with their changes and a type tag each; by type, each cell a kind of change with who made it.

  • Pro

    Release Page Changelog

    Spotlights and media

    A release page as a split: the tag, date, commit with a Copy button and contributors at the start, and the changes, new contributors and a collapsible assets table at the end.

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