Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Plugin Updates Changelog Block for React

A checklist table of plugin updates: a checkbox per row, old and new versions in mono, a compatibility badge, a disabled row that says why, a polite count of what is selected and an Update button that flips the rows to Updated with a stated demo result.

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 plugin-updates checklist for React with Base UI, written for Addonry, a fictional extension manager. The header counts from the data ("5 plugins are ready to update") with the main action at its end, a Shine Button whose label follows the selection ("Update 3 plugins"), and a polite line under it ("3 selected"). A table runs rail to rail with hairlines between rows: a checkbox, the plugin and what it does, the update as old and new versions in mono, and a compatibility badge with an icon and a word (Compatible, Needs v6). The plugin that needs a newer editor can't be ticked: its checkbox is off and the reason is in its row. Pressing Update flips the ticked rows to "Updated", locks them, and says in the same polite line that this was a demo and nothing was installed. On a phone the table keeps the checkbox, the name and the versions. It's built from Table markup, Checkbox, Badge, Shine Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For extension managers, dependency bots and update screens. The plugins are example data, and nothing is downloaded or installed.

FAQ

How do I change the plugins?

Edit PLUGINS at the top of the file. A plugin is an id, a name, a note, its was and to versions and a compatible flag; PRESET lists the ones ticked on load, and EDITOR is the version the manager checks against. The headline, the count of plugins that wait and the button's label are all computed from the data.

What does Update selected actually do?

Nothing leaves the page. It marks the ticked rows "Updated", locks their checkboxes, clears the selection and says, in a polite status line, "Updated 3 plugins (demo, nothing was installed)". Focus moves to that line so a screen reader hears it. Replace the handler with your own request when you wire it to a real manager.

How is the incompatible plugin handled?

Its checkbox is disabled and described by the line in its row ("Needs editor v6; this one is v5.4"), so the reason is read with the control. The badge says "Needs v6" with a lock icon, and on a phone, where the badge column is dropped, the reason line is still in the row.

How do the checkboxes behave?

Each is the catalog Checkbox named "Update" and the plugin; Space toggles it. A ticked box is drawn in the foreground colour rather than the primary one, because the Shine Button is the block's only primary control. The "N selected" line is read politely whenever it changes.

What moves, and what happens with reduced motion?

The header and the table fade up once on load, with CSS transitions, and the Shine Button has its sweep on hover. With reduced motion the entrances and the sweep are off. Ticking and updating change the rows at once.

  • Pro

    Dependency Updates Changelog

    Packages and versions

    A table of eight dependency updates in two groups, Production and Dev: package, old and new version, the kind of bump and a three-pip risk, with sortable heads that reorder the rows inside each group.

  • Pro

    Third-Party Integrations Changelog

    APIs and integrations

    An API-version compatibility table that ends the block: a button group picks the API version you run, and each connector shows Works, Needs update or Retired on it and on the latest version.

  • Pro

    Integration Log Changelog

    APIs and integrations

    Five connector changes as rows that run rail to rail and end the block, each with a neutral lettermark plate, a state badge, a day and a scopes popover listing what the connector reads and writes.

  • Pro

    Monorepo Packages Changelog

    Packages and versions

    One release as a workspace tree: the facts at the start, and past a divider a tree of packages with each version bump, its kind as an icon and a word, and the packages that were bumped only because something they depend on changed.

  • 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

    Review Checklist Changelog

    Deploys and rollouts

    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.

All 200 changelog blocks