Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Review Checklist Changelog Block for React

A pre-release checklist as a split: a progress summary and a Ship button that stays disabled until all 14 checks are ticked, beside four accordion categories of real checkboxes with owners and Blocker badges.

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 release checklist for React with Base UI, written for Launchlist, a fictional release-readiness tool. A split with a divider that runs from the top rule to the end of the block. At the start sit the title, a bar with "9 of 14", two counts (items and blockers remaining) and the Shine Button "Ship v4.3", which stays disabled until every box is ticked; a line beside it says why, such as "5 items remain, 2 of them blockers", and says that the result is a demo once pressed. At the end four categories (Code, QA, Docs, Release) sit in an accordion with the first open. Each item is a real checkbox with its owner as initials and, where it holds the release up, a Blocker badge; each category's trigger counts its own ticks. On a phone the summary comes first and the checklist under it. It's built from Accordion, Checkbox, Progress, Avatar, Badge, Shine Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For release managers and teams that gate a launch on a list. The checks and names are example data and nothing is saved.

FAQ

How do I change the checks?

Edit CATEGORIES at the top of the file: each has an id, a label and items, and an item has an id, a title, an assignee and a blocker flag. START lists the ids ticked when the page loads. The bar, "9 of 14", both counts and the status line are worked out from those arrays and the ticks, so they stay true when you edit.

What does the Ship button do?

It is disabled until every item is ticked, and the line beside it, a polite status region, says why ("4 items remain, 1 of them a blocker"). Once everything is ticked, pressing it shows "v4.3 is marked ready in this demo. Nothing was deployed." Nothing is sent or changed, and unticking any item withdraws that message.

How do the categories open?

One at a time, with Code open first. Ticks live in the block's own state, so they survive opening and closing a category. A closed category stays in the page, hidden, so its checkboxes are there for search and for assistive technology once it opens.

How are blockers told apart without colour?

A blocker has an outline badge with an icon and the word Blocker, and the count of blockers remaining is its own number. Nothing in the block uses a status colour.

How are the checkboxes named?

Each is named by its item's title and described by "Owner" and the person's name, which is also what the initials stand for. The boxes follow the theme: ticked is foreground, never the primary colour, which stays on the Ship button.

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

Below lg the halves stack: the title and the summary first, then a rule and the accordion. In a right-to-left layout the split and the checkboxes mirror, and counts keep their order.

  • Pro

    Checklist Style Changelog

    Votes and sharing

    A "tried it" checklist of the six latest things a task board shipped: a real checkbox per feature with its version and day, a count in the header and a meter that fills as you tick.

  • 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

    On-Call Handoff Changelog

    Incidents and uptime

    A pager handoff note as a split: two responders and a band of three counts at the start, a checklist of what is still open at the end that the incoming person ticks, and a Shine Button that unlocks when every box is ticked.

  • Pro

    Steps Chain Release Approval Flow

    Deploys and rollouts

    A release sign-off split: a summary of the release at the start, and a vertical approval chain at the end with people, states and times, an Approve button that advances it in the demo, a progress bar and a Deploy button that gives a stated demo result.

  • Pro

    Progress Tracker Changelog

    Roadmap and customers

    A progress tracker for a project tool: four framed cells, two by two, each with a ring filled to the share of its tasks done, its name, a count like 7 of 12 tasks, a target quarter and a Remaining tasks row that opens to the list.

  • Pro

    Post-Mortem Changelog

    Incidents and uptime

    A blameless post-mortem as one framed report: three impact cells, a five-whys accordion from the symptom to the root cause, and an action-items table with owners, due days and states beside a progress bar.

All 200 changelog blocks