shadcn.io is not affiliated with official shadcn/ui
Changelog Pipeline Kanban Block for React Aria
A three-column release pipeline (Draft, In review, Released) of eight changelog entries with a version chip and a release-notes field, where an entry cannot be Released until it has release notes.
Installation
Overview
Take release notes from draft to published with this changelog pipeline for React with React Aria. A hairline frame with a plus mark on each corner holds three columns, Draft, In review and Released, and eight entries. Each card shows the change, its version in a mono Badge and a one-line Input for its release notes; once an entry is Released its notes show as text. One rule guards the last column: an entry can't be Released without release notes, so the move is refused in the status line when the field is empty, whether it came from a drag, the keys or the menu, and typing a note lifts the block. Column heads count their cards and the entries still without notes, and the sentence under the heading is worked out from the cards. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to"; a polite status line reports each change and Reset restores the pipeline, notes included. On a phone the columns scroll sideways in one named region. For release management and any workflow that needs a write-up before it ships.
FAQ
How do I fill it with my own entries?
Edit COLUMNS and START. An entry has an id, the column it starts in, a title, a version and notes, which is empty until someone writes it. The counts and the header sentence are calculated from the cards.
How does the release-notes rule work, and how do I change it?
refusalOf returns a reason when an entry heads for Released with empty or blank notes. Drag, keys and menu all ask it, so no route gets around it. Replace the body with your own rule, such as a minimum length or an approver.
Why does typing in a card not start a drag?
The drag starts only from the grip button at the start of the card, so the notes field is a plain field: you can type, select and use the arrow keys in it without moving anything.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its title. Press Space or Enter to pick it up, the arrow keys to move it (left and right change column, and swap in right-to-left languages), Space or Enter to drop it and Escape to put it back. Every step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column. Choosing one moves the card, puts focus on it in its new place and says so in the status line, and it obeys the same rule as a drag. React Aria's menu is a group of selectable items, so the column is chosen by selection rather than by a radio item.