Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Todo List blocks

Pro

Deployment Checklist Block for Solid

A nine-step release pre-flight list with a progress bar, a Next marker on the first open step, and a Deploy button that waits until every step is ticked and says which one it is waiting on.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep a release honest before it ships, with this deployment checklist block for Solid with Ark UI. A hairline frame holds a Progress bar over nine pre-flight steps, each a Checkbox with its owner and time beside it. The order is a guide, not a lock: any step can be ticked first, and the first one still open carries a Next Badge. The foot holds the only colored control, a Shine Button that stays aria-disabled until all nine are done; the line above it says "Waiting on: Run smoke tests +2" and an outline button moves focus to that step. Pressing Deploy marks the release deployed in this demo, locks the steps and turns the outline button into Reset checklist. Bands are ruled by Guides. For release runbooks, launch days and any hand-off that must not skip a step.

FAQ

Why can steps be ticked out of order?

Real releases rarely run in a straight line, so the list records what is done rather than forcing a sequence. The order is shown by the numbers and by the Next badge, which always sits on the first step still open. If you want a hard lock, refuse a toggle in toggle when an earlier step is open.

How does the Deploy button wait?

It is aria-disabled, not disabled, so it stays focusable and a screen reader reads why. Until nine of nine are ticked the status line names the first open step and how many more follow, and the outline button beside it focuses that step. Pressing the button before then does nothing.

What stays local, and how do I wire it for real?

Everything. Ticking steps and pressing Deploy only change state on the page, and nothing is deployed, so the list resets when you reload. In your app, load START from your release record, save each tick from toggle, and call your pipeline from deploy after checking the same nine of nine rule on the server.

What does Reset checklist do?

After a deploy the steps are locked. Reset unticks all nine, unlocks them, and moves focus to the first step so a keyboard user does not lose their place.

Is it accessible?

Each checkbox is named by its step, the status line is a polite live region that changes with every tick, and the Next badge is real text, not a color. The Go to step button is a plain button that moves focus to a labelled step.

How does it look on a phone?

The progress bar and the count stay on the first screen, each step is two lines (title, then owner and time), and the Deploy and Go to step buttons sit side by side in the foot.

All 100 todo list blocks