Tangerine Fitness Onboarding
A motivational, step-by-step onboarding wizard for fitness and wellness applications.
Features
- 4-step indicator — Visual step progress with icons, connecting lines, and completion states
- Goal selection grid — 6 fitness goals with toggle selection, icons, and descriptions
- Form fields — Target weight input and weekly workout frequency selector
- Progress bar — Orange-to-coral gradient progress indicator
- Navigation — Back, Skip, and Continue buttons
- Interactive state — Reactive goal selection with visual feedback
- Responsive — Single-column on mobile, two-column grid for goals
- Dark mode — zinc-950 bg with orange-500 accents
Dependencies
@/components/vue-ui/card — Main content card@/components/vue-ui/badge — Step label and unit badge@/components/vue-ui/button — Navigation and frequency buttons@/components/vue-ui/progress — Step progress bar@/components/vue-ui/input — Target weight input@/components/vue-ui/label — Form field labels@/components/vue-ui/separator — Section dividerlucide-vue-next — Icons
Customization
- Edit
fitnessGoals array for different goal options
- Change
totalSteps and steps for more/fewer onboarding steps
- Adjust gradient colors (from-orange-500 to-rose-500) for your brand
- Modify form fields for your specific onboarding data needs
