Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Avatar Bylines Changelog Block for React

The four latest releases of a design tool, each signed by the person who led it: initials avatar, name and role, a type tag, a title and a sentence, with co-authors in a small avatar group.

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 bylined changelog for React with Base UI, written for Namebadge, a fictional design tool. A start-aligned header carries the title and one sentence. Under a rule with + marks, a two-up grid of cells on shared hairlines holds four releases. Each cell opens with a byline (the lead author's initials on a greyscale tone, their name and role, and the day the release shipped at the end), then the version in mono, a type tag with an icon and a word, a title and a sentence. A release with more than one author closes with a small avatar group and a line naming the co-authors; a release by one person has none. The avatars are decoration, hidden from assistive technology, because every name is in text beside them. On a phone the cells stack in one column. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Avatar, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For release pages that credit the people behind them. The people and releases are example data.

FAQ

How do I change the people and the releases?

Edit the Person constants (ODILE, DARIO and the rest: initials, name, role and a greyscale tone) and RELEASES at the top of the file, newest first. A release has a lead person, a list of coAuthors (empty for a solo release), a version, a date as an ISO day ("2026-09-21"), a kind, a title and a summary. Dates are fixed, never computed from today. Keep it to an even number of releases so the two-up grid has no empty cell.

Can I use photos instead of initials?

Yes. The avatar is the catalog Avatar, so add an AvatarImage before the fallback and the initials remain as the fallback while it loads or if it fails. Keep the avatar hidden from assistive technology as long as the person's name is in text beside it.

How are the change types told apart without colour?

Each tag is an outline badge with an icon and the word, so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the icon. The avatar tones are greyscale too, and each keeps AA contrast in light and dark themes.

How are co-authors shown?

As a group of overlapping avatars with a line beside it, for example "With Haruka Mori and Dario Okonkwo". The line is the accessible part; the avatars repeat it visually. A release with no co-authors shows nothing at the foot of its cell.

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

Below md the grid is one column and each cell keeps the same byline, tag and text. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the byline, the date and the avatar group mirror, while the version numbers stay left to right.

What moves, and what happens with reduced motion?

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

  • 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

    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

    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

    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

    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

    Minimal Avatars Team

    Carousels and reels

    A single quiet strip: twelve overlapping initials avatars and a +12 count, each avatar a focusable link whose name and role show in a tooltip, with one line under it that says how many people work in how many countries.

All 200 changelog blocks