Shadcn UI Onboarding Block
Onboarding2 is a modal-based onboarding wizard that overlays a blurred dashboard background. The dialog uses a two-column layout with description on the left and interactive content on the right. Each step has a distinct pastel background color. Steps include profile questions with selects, goal selection with checkboxes, account linking with social buttons, browser extension promotion with dashboard preview, and trial activation with feature list.
The background shows a placeholder dashboard with sidebar and header to establish context. The dialog has smooth fade transitions between steps using motion animations. Each step’s right panel uses a different pastel color (orange, blue, pink, green, purple). Step indicators show progress as filled dots. The back button appears after the first step.
This is a polished onboarding experience with strong visual design. The colorful step backgrounds and smooth transitions create an engaging flow. The blocking validation on the account linking step demonstrates conditional progression. Higher complexity with multiple step components and custom CTA buttons per step.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| motion | NPM |
| react | NPM |
button @shadcn | Registry |
checkbox @shadcn | Registry |
dialog @shadcn | Registry |
input @shadcn | Registry |
label @shadcn | Registry |
select @shadcn | Registry |