Fitness app onboarding: goal selection
A fitness app onboarding goal selection screen for iOS and Android. Dark background, step 1 of 3 progress indicator, a What is your main goal headline, and a two-by-two grid of four goal cards: Lose weight, Build strength pre-selected in blue, More cardio, and Stay flexible. Each card has an icon and a one-line description. Blue Continue button pinned at the bottom. Built for Bolt, Lovable, and Replit.
About this app template
Personalising a fitness app around the user's primary goal from the very first screen dramatically increases long-term engagement. This onboarding step uses a near-black background and a clean two-by-two grid of four goal cards. Each card has a rounded icon container, a bold goal name, and a one-line description. Build strength is pre-selected in blue with a filled checkmark badge. Lose weight, More cardio, and Stay flexible are inactive with dark grey icon containers and muted text. A three-dot progress indicator at the top shows this is step 1 of 3. The blue Continue button is pinned to the bottom. Paste into Bolt, Lovable, or Replit and ask your AI to make the cards tappable, persist the selection, and personalise workout recommendations based on the chosen goal.
Common questions about this template
How do I save the selected goal and use it to personalise the app?
Paste this template into Bolt, Lovable, or Replit and ask your AI to toggle the selected card state on tap. On Continue, save the goal value to a user_profiles table. Use the saved goal to filter the recommended workouts shown on the home screen after onboarding.
How do I allow the user to select multiple goals?
Ask your AI to change the selection logic from radio to checkbox behaviour: tapping a card toggles it without deselecting others. Store the selected goals as an array in the user profile. Update the Continue button to stay disabled until at least one goal is selected.
How do I add a custom goal input option?
Add a fifth card at the bottom of the grid that spans the full width and contains a text input placeholder. Ask your AI to focus the input when the card is tapped and save the free-text value alongside the goal type in the user profile.
Can I use this goal picker for a nutrition or diet app?
Yes. Swap the goal cards for options like Eat healthier, Lose weight, Build muscle, and Maintain weight. Update the icons and descriptions, change the headline, and the layout, progress indicator, and CTA all carry over directly.
Use this template for
- ·Fitness app onboarding goal selection screens for iOS and Android
- ·Health and wellness app first-run personalisation steps for Bolt and Lovable
- ·Workout preference screens for vibe coding gym and training apps with Replit
- ·Multi-step fitness onboarding flows with dark UI for mobile app vibe coding
Works with every vibe coding tool
More app templates
View allApp paywall with feature grid
App paywall with feature grid
Paywall
Social auth sign-in
Social auth sign-in
Sign in
Onboarding with social proof
Onboarding with social proof
Onboarding
Welcome splash with photo background
Welcome splash with photo background
Splash
Email sign-in
Email sign-in
Sign in
OTP verification code
OTP verification code
Sign in