shadcn.io is not affiliated with official shadcn/ui
Guided Walkthrough Onboarding Block for Radix UI
A 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.
Installation
Overview
Teach a product by letting people use it, with this walkthrough for React with Radix UI. It is a window of Lanternfell, a design-review canvas: the app is drawn at two thirds of a framed window (a top bar with Share, a row of tools with search, add and comment, a canvas with a frame, and a properties panel), and a docked guide holds the other third with four tasks, a count with a hairline of Progress, and the one you are on. The control for the current task is ringed in the drawing, and the ring draws in three times and then rests. Doing it, by pressing the control or its key shown in Kbd, ticks the task, makes the drawing react (a search list opens, a second frame appears, a comment pin lands, the file reads Shared) and opens the next one. Skip this step moves on without it. On a phone the drawing sits above the guide.
FAQ
How is it different from a tour?
A tour points at things and moves on when you press Next; this waits. Each task is complete only when you do it: press the ringed control or the key, and the drawing changes as the real app would. The other controls stay where they are and, when pressed out of order, say what to do first. Skip this step is there for anyone who knows it already.
Where do the keys work?
Only while focus is somewhere inside the window: a capture listener on the window's own element hears them, so nothing is bound to the page and your site's own shortcuts are untouched. The status line says so. Command shows first and becomes Ctrl after the page loads on a system that has no Command key; the Share task uses it.
What stays local in the demo, and how do I wire it?
All of it. Nothing is shared, commented or saved; the drawing is a picture that reacts, and each result is said in a polite status line (“Done: Open search. Next: Add a frame.”). In your app, drop the drawing, point each task's id at a real control in your UI, and mark the task done from the real event, for example when your search opens.
What about reduced motion?
The ring is the cue, not the motion: it is always drawn round the current control, and the three-times draw-in plays only when motion is allowed. Nothing loops, and nothing else in the window moves by itself.
How do I change the four tasks?
Edit TASKS: each has a title, one sentence on what to do, and the key. A task's control is one of the Target buttons in the drawing, matched by id; to add a fifth, add a control to the drawing and a line to TASKS. Keep the list short: a walkthrough longer than four or five tasks is a course.