shadcn.io is not affiliated with official shadcn/ui
Welcome Checklist Notification Block for Radix UI
A CRM's first-run checklist: a continuous progress ring and a headline that follows it at the start, four steps in an accordion in the frame (the first picks Sales, Support or Hiring and the rest follow it), and Complete setup, which stays quiet until all four are done.
Installation
Overview
Greet new customers with something to do, with this welcome notification for React with Radix UI. It is Startwick, a CRM, on first run. At the start of the row, outside the frame, a Circular Progress ring counts the four steps and a headline follows it ("4 steps to go", then "3 steps to go"); in the frame, an Accordion keeps exactly one step open. The first step asks what you track first in a Segment Group, Sales, Support or Hiring, and the sentences and the last step's name follow that choice. Each step has one button that does it; the step reads Done with a tick and can be put back. Complete setup, the one Shine Button, stays quiet until the fourth step is done, names what is still open if pressed early, then closes the setup with an Undo. Guides draw the frame. For first-run welcomes, activation checklists and any product that needs a few things set up before it is useful.
FAQ
How do I change the steps?
Edit STEPS (an id and the label of its button), CHOICES (the pipelines, with the sentence that follows each) and the helpers titleOf and sentenceOf, which say what each step is called and asks for. The ring, the headline, the sentence under it and the "N steps to go" words are all worked out from the list of done ids, never typed twice. Keep the sentences about the same length: every open step is given the same height, so the frame never jumps.
What does the first step's choice change?
The sentence of the contacts step (the people you import follow the pipeline) and the name and sentence of the last step ("Create your first deal", "ticket" or "role"). The choice is live: change it and the text changes, and when the step is done its row ends in the pipeline's name instead of "Done". It creates nothing; in your app it would set the template your account starts from.
Why does Complete setup stay quiet?
Setup should not be closed with a step open, but a disabled button hides why. So the button keeps its place, looks quiet and stays pressable: pressed early it says what is still open, opens that step and moves focus to its header. When all four are done it becomes the normal primary; pressing it closes the setup on this page, fills the ring and says nothing was created. Undo opens it again.
What stays local in the demo, and how do I wire it?
Everything. Nothing is imported, connected or created: the buttons only change the ticks. In your app make each button open the real place (the import dialog, the inbox connection) and let done come from what your server knows the account has done, so a step ticks itself when the work is finished anywhere.
Can I use it from the keyboard?
Yes. Tab reaches each step header, the open step's control and button, and Complete setup; Enter or Space opens a step. The arrow keys move between the step headers, and Home and End jump to the first and last. After a step is done, focus moves to the next step's header.