shadcn.io is not affiliated with official shadcn/ui
Command Palette Stepper Block for Radix UI
A nine-step backend setup with a menu shown open that jumps to any step by typing: steps grouped Done, Current and Up next, a search that reads the start of any word, and a drawn setup page that follows the choice.
Installation
Overview
Let people jump around a long setup by typing, with this command palette for React with Radix UI. It belongs to Backend setup in Anvilbase, a backend console: nine steps from an empty project to a live API (Project, Database, Authentication, API routes, Team, Domains, Keys, Dashboard and Deploy), shown as a drawn setup page with a rail of nine dots under a soft scrim inside a hairline frame with a plus mark on each corner. The catalog Command is drawn open over it, with the steps in three groups (Done, Current and Up next), each row a state glyph, the step's name over what it covers, and its number and state in words. Typing filters by the start of any word of the name, the line or its search words, so "api" or "dns" finds a step, and the matches are marked. Enter on a row moves the drawn page to that step and a status line below says so; there is no Shine Button because Enter does the choosing. The header button, or Ctrl or ⌘ K while focus is inside the block, opens the real command dialog with the same rows and the same query. For consoles, installers and any flow with more steps than a rail can hold.
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 catalog Command drawn inline over the page, with nothing trapped or focused. The header button, or Ctrl or ⌘ K, opens the real command dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same Palette and share the block's search and position. In your app keep the dialog and drop the copy: the "in-place" state, the scrim and its shell, and the Escape and blur effects.
Where does Ctrl K work?
Only while focus is inside this block: the listener sits on the block's section, so the site's own search keeps the key everywhere else. The keys show as Ctrl until the browser reports an Apple system, then as the command key.
What does the search read?
Every typed word has to start some word of the step's name, its one-line description or its search words, so "ame" does not find "Name" but "na" does. It ignores case and accents and also reads "step 4". Matches are marked in the name and the line, and the count in the footer, spoken a moment after you stop typing, says how many of the nine match.
What stays local, and how do I make it real?
Everything. Choosing a step changes the position in component state and the drawn page follows; nothing is created or deployed, and the status line says "In this demo only". In your app call your router or your setup state from pick, and keep the groups derived from the position, as groupOf does here.
How does the keyboard work?
Up and Down move through the rows, Enter chooses, and Escape closes the menu (and in the real dialog returns focus to the header button). The in-place copy takes no focus on load; click or press the header button to start typing. The rows are filtered by the block, with the library's own filtering switched off.