Shadcn UI Onboarding Block
Onboarding1 is a comprehensive five-step onboarding wizard with a two-column layout. The left column contains forms and the right shows an animated dashboard preview that responds to user input. Steps include profile setup with avatar upload, workspace configuration with logo and URL, account linking with Google/Facebook, role selection with pill-shaped options, and team member invites with email inputs and role selectors.
Light background with the content area using a bordered container on larger screens. The dashboard preview uses motion animations to zoom and update based on form input. Profile and workspace steps show file upload with preview. The account linking step offers social login buttons with a skip option. Step progress shows in a header indicator.
This is a highly elaborate onboarding flow with significant complexity. The animated dashboard preview that reflects form input in real-time is the standout feature. Requires extensive customization for production use including form validation and actual authentication integration. The motion-based animations add polish.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| motion | NPM |
| react | NPM |
button @shadcn | Registry |
dialog @shadcn | Registry |
input @shadcn | Registry |
label @shadcn | Registry |
select @shadcn | Registry |
switch @shadcn | Registry |
table @shadcn | Registry |
textarea @shadcn | Registry |