shadcn.io is not affiliated with official shadcn/ui
Onboarding Checklist Command Menu Block for Ark UI
A SaaS app's command menu shown open over its Home page as a setup checklist: five steps that are done, current or locked, a progress bar, and a Mark done button that unlocks the next one.
Installation
Overview
Walk a new user through setup from the keyboard with this onboarding checklist command menu for React with Ark UI. It opens from the Home page of Kickstep, a SaaS app, whose header holds an outline field with its ⌘ K cap, and an empty Home is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, with a "Setup 2/5" chip and a checklist card. The menu is the catalog Command over five steps, each with its state as a glyph and a word, Done, Current or Locked, and for a locked one the reason, "Finish “Invite a teammate” first". A Progress bar above the field counts "2 of 5". Only the current step opens: Enter shows what to do in the same shell, and Mark done ticks it, unlocks the next one and goes back to the list. Back, or Escape, returns without ticking, choosing a locked step says why it is locked, and Start over returns to step one. The drawn checklist behind it ticks the same steps. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same progress, step and query. For first-run checklists, activation flows and any product with steps that must happen in order.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of the Home page, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a step you marked done in the copy is there in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How do the locks work?
Progress is one number, the steps done. Step i is Done below it, Current at it and Locked above it, so there is exactly one current step and the locks cannot disagree with the bar. A locked row stays pressable: it does not open, the status line says "Locked. Finish the current step first", and the reason is in the row's text, so it is read in full instead of being greyed out below contrast. The catalog's own disabled look is not used for that reason.
What does Mark done do, and can I undo it?
It adds one to the steps done, so the current step becomes Done, the next one becomes Current and the progress bar, the count in the foot and the drawn checklist all move together. The menu goes back to the list and focus returns to the search field. There is no per-step undo; Start over, the last row, returns to step one so the whole flow can be walked again. In your app mark the step done when your product confirms it happened, not when the button is pressed.
What stays local, and how do I wire it?
All of it. The progress is state in the block, and the status line ends with "In this demo only". In your app read the steps done from your user record, derive each step's state from real events (a repository connected, an invite accepted) and let Mark done be only a shortcut for steps that have no event of their own.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter opens the current step, and Escape steps back from an open step first and then closes the menu with focus on the field. In an open step focus moves to Mark done, and back in the list it returns to the field. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.
How does it look on a phone?
The copy shown on load docks to the top of the stage so the keyboard does not cover the foot. The state word at the end of each row goes, the glyph stays, and a locked step's reason wraps to a second line so it can be read in full. The real dialog keeps the Command dialog's own phone layout.