shadcn.io is not affiliated with official shadcn/ui
Tutorial Finished Success Block for React
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.
Installation
Overview
Send a learner back to work with what they learned using this confirmation page for React with Base UI. It is the page Keybound, a code editor, shows when its three-lesson keyboard tour is done: the page's side rails and one band frame it, start-aligned, and the heading and one sentence give the count and the time spent. One framed panel opens with a full Progress bar ("3 of 3 lessons"), then lists the lessons, each with a ticked mark, what it taught in a sentence and its shortcut as Kbd key chips that wrap on a phone, and ends with a Next up row linking to the next course. The Shine Button, Open the editor, is the only colored control and is pinned to the foot of a phone's screen. For editors, design tools and any product with a guided tour.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was tracked. The lessons, their keys and minutes, and the next course are typed in LESSONS and NEXT; the lesson count and the minutes in the heading are summed from them. To wire it, build LESSONS from the tour the visitor completed, show this page when all are done, and point the row and the button at your routes. The page keeps no state.
How are the shortcuts shown, and what about Mac?
Each key is its own chip inside a group, read in order after "Shortcut:". The chips use "Ctrl", and the sentence under the heading tells Mac users to press Cmd. If you detect the platform, swap the key names in the data.
Do the key chips mirror in right-to-left languages?
No. Keys, like code, stay in left-to-right order, so Ctrl comes before P in every direction, while the rest of the row mirrors.
How does it look on a phone?
The lessons stack: the name and take-away first, the key chips under them, wrapping to a second line if needed. The Shine Button stays pinned to the bottom of the screen while the page scrolls under it.
Related
- Pro
Practice Keyboard Shortcuts Onboarding
Welcome and toursA code review tool's shortcut sheet you can practise on: a table of six shortcuts that tick off as you press them while focus is inside the panel, a chord with a waiting state, and a Command or Ctrl switch.
- Pro
Guided Walkthrough Onboarding
Welcome and toursA learn-by-doing walkthrough in a framed window: a drawn design-review app beside a docked guide of four tasks, where the control for the current task is ringed and doing it, by click or by key, opens the next.
- Pro
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.
- 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
A page for reaching a new level: the XP a lesson earned counted up, a bar that wraps from a full Level 4 to Level 5 with its 20 XP carry-over, three unlocked perks, and a quiet fall of confetti.
- 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.