shadcn.io is not affiliated with official shadcn/ui
Version Update Notification Block for React Aria
A major release, 2.8.4 to 3.0.0, with its facts in a quiet column and three tabs for highlights, breaking changes and a migration checklist that unlocks the Update button once every step is ticked.
Installation
Overview
Announce a release that needs some work before it is safe to take, with this version notice for React with React Aria. It is Semverwick, a design-system library, in two columns. The first is quiet and unframed: a Data List with the version change (2.8.4 to 3.0.0), its type as a Badge, the date, the package and the Node it needs. The second is a framed panel with three Tabs: Highlights, Breaking changes and Migration, where Migration is a list of Checkboxes, one per breaking change. "Update to 3.0.0", the one Shine Button, stays aria-disabled until every step is ticked, and the status line says how many steps are to go. Pressing it early opens Migration, focuses the first open step and says so. The three panels stack their text in one cell, so the frame never changes height as you switch. Guides draw the lines. For major releases, deprecations and any update with a checklist.
FAQ
How do I fill it with my own release?
Edit FROM, TO, HIGHLIGHTS, BREAKING and MIGRATION (each entry has an id, a title and a text) and the facts in the first column. The count on the Migration tab, the steps to go and the button's state are worked out from how many migration steps are ticked, so adding a step adds a checkbox and a count without more code. The product, package and codemod names are made up.
Why can I not just press Update?
A major release breaks things on purpose, so the update waits until you have said you did the work. While steps are open the button is aria-disabled but still focusable and still answers: it switches to Migration, moves focus to the first step still open and says "2 steps to go. Tick each one first." It never fails silently. Once every step is ticked it becomes active and queues the update.
What really happens when I update?
Only this page changes: a polite line says the update was queued in this demo and nothing was installed. The checkboxes are state in the page, and "Release notes" only says in the status line what it would open. In your app run the update from update, and keep the checklist as your own guard or as a record of what the user confirmed.
Does the panel move when I switch tabs?
No. An unseen copy of the three panels' text sits in the same grid cell as the live one, so the cell is as tall as the tallest and the Migration list has the same room for its checkboxes as the other lists have for plain lines. The live panel is the only one that can be reached or read.
Is it accessible?
The tabs are a labelled tab list with the arrow keys, each step is a real checkbox named by its title and described by its text, and the whole row is the hit area. A single polite line says how many steps are to go, and the lock icon on the button is decorative: the button's state is in its aria-disabled and in that line. React Aria Tabs render the panel only while it is selected.