shadcn.io is not affiliated with official shadcn/ui
Plugin Updates Changelog Block for Ark UI
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.
Installation
Overview
A plugin-updates checklist for React with Ark 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.