shadcn.io is not affiliated with official shadcn/ui
Checklist Builder CRUD Block for React
A launch checklist you build and then run: Edit changes items where they sit, moves them between sections and removes them with an Undo, and Run turns the same list into checkboxes with a count whose ticks reset when you leave.
Installation
Overview
Write a checklist once and work through it as often as you need, with this builder for React with Base UI. A hairline frame with a plus mark on each corner opens on a Segment Group that switches one list between Edit and Run, with a count beside it. In Edit, nine items sit in three sections inside a frame of fixed height: an item is an Editable that opens when you press it, a native select moves it to another section, Remove leaves an Undo in the foot, Enter in the quiet line under a section adds an item and Enter in the line at the end adds a section. In Run the same items become Checkboxes with "4 of 9 done", a Progress bar and Reset ticks. Ticks belong to the run, so they reset when you go back to Edit, and the status line says how many were cleared. The band is ruled by Guides, and an Empty state shows in Run when the list has no items. For launch days, release checks, onboarding runs and any list that is written once and run many times.
FAQ
How do I fill it with my own checklist?
Edit SECTIONS and ENTRIES: a section has an id and a name, an item has an id, a section id and its text. Items are shown in the order of the array inside their section, and a moved item goes to the end of its new section.
How do I change an item?
Press its text, or the pencil that appears on hover and on focus, type and press Enter or the check; Escape or the cross cancels. An empty text is refused and the old words stay. The select beside it moves the item to another section and focus follows the item.
Why do the ticks reset?
A run is one pass through the list, not part of the list. Ticks are kept only while you stay in Run; switching back to Edit clears them and says how many there were, and Reset ticks clears them without leaving. If you want runs to be kept, store them as their own records in your app, keyed by date.
What does Undo bring back?
The last removal, in its old section and place, with focus on it. Adding, moving or renaming replaces it, so Undo never restores something older than what you see.