shadcn.io is not affiliated with official shadcn/ui
Checklist Style Changelog Block for React Aria
A "tried it" checklist of the six latest things a task board shipped: a real checkbox per feature with its version and day, a count in the header and a meter that fills as you tick.
Installation
Overview
A "tried it" checklist for React with React Aria, written for Doneboard, a fictional team task board. A start-aligned header carries the title and one sentence, with the count at its end ("2 of 6 tried") and a full-width meter under it that fills as you tick. Below, a framed list of the six latest features: each row is a real checkbox with the feature's name, one line on what it does, and the release it came in (version and day); a ticked row says "Tried". The count is read aloud in a polite status each time it changes. Two rows start ticked so both states are on view; ticks live only in the page and are not saved. On a phone the version, day and mark drop under the text. The page's rails and top rule come from the Guides spine; the frame's corners carry the + marks. It's built from Guides, Checkbox, Field and Progress, with your theme's tokens for every colour. For release pages that want readers to explore what's new. The features are example data.
FAQ
How do I change the features?
Edit FEATURES at the top of the file, newest first. Each feature has an id, a title, a one-line detail, a version, a date as an ISO day and startsTried, whether its box starts ticked. Set every startsTried to false for a clean list. The total, the count and the meter come from the list, so they follow your edits.
Are the ticks saved?
No. They are state in the page: reload and they reset. That is on purpose, since the block has no account to save them to. To keep them, store the tried ids in local storage or send them to your server from toggle.
How is the count told to a screen reader?
The count ("2 of 6 tried") sits in a polite status, so each tick is announced. The meter under the header is decoration and hidden from assistive technology, because the sentence already says the same thing. Every checkbox is named by its feature's title and described by its line.
Where can I click to tick a feature?
Anywhere on its row: the whole row is the checkbox's label. The box turns foreground-coloured rather than primary when ticked, so the page's one primary colour stays with its main action. Keyboard: Tab to a box and press Space.
How does it fit on a phone and in a right-to-left layout?
Below sm each row is a box and the text, with the version, the day and the "Tried" mark under the text. From sm they sit in a column at the row's end. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the box moves to the start edge and the version and counts keep their reading order.