Lilac Onboarding Flow
An education-themed onboarding wizard with a 4-step flow and lilac accent palette.
Features
- 4-step onboarding stepper with visual progress indicator
- Animated progress bar showing completion percentage
- Step 1: Welcome screen with feature highlights
- Step 2: Profile setup form with name, email, and role inputs
- Step 3: Subject selection grid and learning style picker
- Step 4: Completion screen with personalized stats
- Previous/Next navigation with disabled states
- Full light and dark mode support with lilac/purple palette
- Poppins rounded font for modern, friendly typography
Dependencies
lucide-react for education and UI icons- Shadcn
Card, Button, Badge, Input, Label, Separator components
Customization
- Edit
steps array to change step titles and icons
- Modify
subjects array to update available subject choices
- Update
learningStyles array with different style options
- Adjust lilac accent colors via inline hex values
- Customize step content components for different onboarding flows
- Change completion stats and messaging in the CompletionStep component
