Autumn Sale50% offCOMPOT
Onboarding & Welcome ScreensPro ComponentiOS 16.0+Xcode 15+

Sports Car App Welcome Screen

Immersive dark-mode onboarding screen with background media and bold typographic accents.

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
sportCarAppWelcomeScreen.swift
// You can ownload the car image here: https://drive.google.com/file/d/1GVdHPmkFmwQ1-DAh2k6kUv1HVDk0toIA/view?usp=sharing

import SwiftUI

struct SportCarAppWelcomeScreen: View {
    
    let carColor: Color = Color(red: 0.88, green: 0.0, blue: 0.1)
    
    var body: some View {
                VStack {
                    VStack(alignment: .leading) {
                        Text("Unleash the speed")
                            .foregroundStyle(.white)
                            .font(.system(size: 32, weight: .heavy))
                        Text("Explore the new driving experience")
                            .foregroundStyle(.gray)
                            .font(.system(size: 32, weight: .heavy))
                    }
                    .padding(.top, 96)
                    .padding(.horizontal)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    Spacer()
                    Button {
                        print("tap")
                    } label: {
                        Text("Get Started")
                            .font(.system(size: 17, weight: .medium))
                            .textCase(.uppercase)
                            .padding(.vertical)
                            .padding(.horizontal, 24)
                            .font(.system(size: 17, weight: .regular))
                            .frame(maxWidth: 450, alignment: .center)
                            .frame(height: 50)
                            .background(
                                RoundedRectangle(cornerRadius: 25, style: .continuous)
                                    .stroke(carColor, lineWidth: 2)
                                    .background(Color.clear)
                            )
                        
                    }
                    .padding()
                    .foregroundStyle(carColor)
                    .buttonStyle(PlainButtonStyle())
                    .contentShape(RoundedRectangle(cornerRadius: 25.0))
                    .padding(.bottom, 24)
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
            .background {
                Image("sportcar")
                    .resizable()
                    .scaledToFill()
                    .clipped()
                    .ignoresSafeArea()
            }
    }
}

#Preview {
    SportCarAppWelcomeScreen()
}

Ready to copy and paste directly into any Xcode project running iOS 16.0+.

Recommended Use Cases

  • First-run onboarding flows and feature introductions

Component Details

iOS Compatibility
iOS 16.0+
Xcode Version
Xcode 15+
Platform
iOS
License Tier
Pro
Themes & Contexts
onboarding
C

Compot for iOS

Native SwiftUI playground app

Preview all 130+ components interactively on your device and copy code straight to Xcode with 1 tap.

Get Compot on the App Store