shadcn.io is not affiliated with official shadcn/ui
Review Checklist Changelog Block for Vue
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.
Installation
Overview
A release checklist for Vue with Ark 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.