shadcn.io is not affiliated with official shadcn/ui
Tutorial Finished Success Block for React Aria
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 React Aria. 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.