shadcn.io is not affiliated with official shadcn/ui
Setup Complete Success Block for React
A page for a finished workspace setup: a full progress bar over five ticked steps with their dates, three launch rows for what to do next, and a quiet fall of confetti that stops with reduced motion.
Installation
Overview
Mark the end of setup with this confirmation page for React with Base UI. It is the page Plankway, a team workspace, shows when the fifth and last setup step is done: the page's side rails and one band frame it, a thin fall of Confetti in foreground tones drifts behind the content, and a success mark, a heading and one sentence say the workspace is ready. One framed panel holds a full Progress bar ("5 of 5 done") over the five steps as ticked rows, each with the day it was finished, and three launch rows that link to starting a project, inviting people and looking at Pro. The Shine Button enters the dashboard and is the only colored control; on a phone it is pinned to the foot of the screen. For workspaces, apps and any product with a first-run checklist.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was set up: the page describes a setup that already finished. The five steps and their dates are typed in STEPS and the three launch rows in LAUNCHES, and the count and the bar come from the steps. To wire it, build STEPS from the account's own onboarding record, show this page when every step is done, and point the launch rows and the button at your routes. The page keeps no state.
What happens to the confetti with reduced motion?
It is hidden: the layer carries motion-reduce:hidden, so a visitor who asked for less motion sees no pieces at all. Otherwise it is a low count of pieces falling slowly behind the content and fading out toward the bottom. It is decoration only: hidden from assistive technology and taking no clicks.
How does a screen reader hear the progress?
The bar is named "Setup, 5 of 5 steps done", the same words as the count beside it, and each ticked row reads "Done:" before its name, so the state is in words and not only in the tick.
How does it look on a phone?
The panel is one column and the launch rows keep only their names, with the one-line help hidden to shorten the page. The Shine Button is pinned to the bottom of the screen while the page scrolls under it; from the small breakpoint up it sits in the flow.
Related
- Pro
Account Setup Checklist Success
Account lifecycleA welcome page after sign-up: what happened, then a five-task setup checklist in an accordion where one task is open at a time, each with its own control, a count and a progress bar, and one primary that opens the app.
- Pro
First Project Success
Account lifecycleA confirmation page for a first project: the new project as three facts, four firsts in a grid of hairline cells with the next one lit and each pickable to read what it takes, one Open the project button and a thin fall of confetti that plays once.
- Pro
Setup Complete Recap Onboarding
Milestones and recapsA whole-screen finish for a project tracker's setup: a recap with three figures, two names edited in place, the theme, invites and connected tool with where to change them, one Open the dashboard button and a light confetti.
- Pro
Setup Checklist Onboarding
ChecklistsA contract tool's get-started guide as a setup panel: six steps in a single-open accordion with one button in the open step, a count that follows what you finish, a menu that hides completed steps or the guide, and a pill that opens it again.
- Pro
A page for a finished keyboard tour: a full progress bar, three lessons as rows with their shortcuts as key chips and a one-line take-away each, and a Next up row for the next course.
- Pro
Two-Factor Recovery Codes Success
Security and accessA two-step sign-in confirmation page: what was turned on, eight single-use recovery codes in a framed sheet with copy and download, and a Finish setup button that stays dimmed until you tick that you saved them.