Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Numbered Onboarding Steps Banner Block for Ark UI

An interactive five-step setup checklist as a card in card: Start completes the next step and the button moves down a row, with a live count and an All set state.

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

A numbered onboarding checklist banner for React with Ark UI, for the first minutes in a new product. A muted shell with + marks on its corners wraps a raised panel: a header with "Setup checklist" and a live "3 / 5 done", then an ordered list of five rows, each 40 px tall. A finished step shows a filled check and a struck-through title; the others show their number, and only the next step carries a ghost Start button. Pressing it completes the step, the button moves down a row and focus goes with it. After the last step the header says "All set". It's built from Button and Guides, and it follows your theme.

FAQ

How do I change the steps and the starting point?

Edit STEPS, the titles in order, and INITIAL, how many are done when the page loads (3 here, so the demo shows a checklist already under way). A step is done when its index is below the count, so the list can only be finished in order.

How do I make Start do something?

The start handler only adds one to the count. Put your real work there: open the step's page, call your API, then raise the count when it succeeds. If the steps are completed elsewhere, drive done from your user's progress instead of the button.

Where does keyboard focus go after Start?

The button you pressed is replaced by the next row's, so focus moves to that Start button, and Tab carries on from there. After the last step there is no button, so focus goes to a line that only screen readers see ("All five steps are done."), and Start over appears in the header.

What do screen readers hear?

The count is a polite live region: pressing Start announces "4 / 5 done", and finishing announces "All set". Each row says its state in words ("Done: Create a workspace", "Next: Run a first build"), the current step is marked aria-current="step", and the Start button's name includes its step ("Start: Run a first build").

Why is it a fixed height?

Every row is 40 px and the header is 48 px in every state, so completing a step, the count changing to "All set" and the Start over button all happen without moving the page. Keep titles to one line: they truncate rather than wrap.

How does it fit on a phone?

The card shrinks to the screen, with titles of about 20 characters or fewer fitting beside the Start button at 320 pixels. In a right-to-left layout the number moves to the start and the button to the end of each row.

All 100 banner blocks