shadcn.io is not affiliated with official shadcn/ui
Setup Complete Success Block for Ark UI
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 Ark 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.