Thistle Nonprofit Onboarding
A warm, welcoming onboarding wizard designed for nonprofit organization platforms.
Features
- 4-step wizard — Organization Info, Mission & Goals, Team Members, Launch
- Progress stepper — Gradient progress bar with step percentage badge
- Step indicators — Rounded icon circles with completion checks
- Org type grid — 6 selectable organization types with Lucide icons
- Team member list — Pre-populated member cards with invite badges
- Launch summary — Completion checklist with motivational CTA
- Thistle palette — Purple-400/violet-500 primary gradient, lavender accents
- Nunito typography — Friendly geometric font via Google Fonts
- Responsive — Mobile-first with fluid layout
- Dark mode — Full zinc-900/950 dark variant with purple accents
Dependencies
@/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter@/components/vue-ui/button — Button@/components/vue-ui/badge — Badge@/components/vue-ui/separator — Separatorlucide-vue-next — Building2, Heart, Users, Rocket, ArrowRight, ArrowLeft, Check, Globe, HandHeart, Sparkles, TreePine, GraduationCap, Stethoscope
Customization
- Steps: Modify the
steps array for different wizard flow
- Org types: Edit
orgTypes for your categories
- Colors: Swap purple/violet classes for your brand palette
