Skip hours of development time! This onboarding template allows you to simplify the building of your onboarding screen. With crisp animations and customizable components, you can tailor this template perfectly to match your brand's style and color scheme.

Download Template

Show us your work!

We want to see what you've made using this template! Send us pics, find us on Twitter @TrailingClosure, or email us at [email protected]

Instructions

Customize the following variables at the top of OnboardingView.swift


var imageNames: [String] = ["image 1", "image 2", "image 3"]
var titles: [String] = ["Loem Ipsum", "Loem Ipsum", "Loem Ipsum"]
var descriptions: [String] = ["Description 01", "Description 02", "Description 03"]

var blobStartColor: Color = Color(red: 220/255, green: 217/255, blue: 239/255)
var blobEndColor: Color = Color(red: 104/255, green: 83/255, blue: 235/255)

var pageControlColor: Color = Color(red: 104/255, green: 83/255, blue: 235/255)

var titleColor: Color = Color(red: 18/255, green: 31/255, blue: 71/255)
var detailColor: Color = Color(red: 18/255, green: 31/255, blue: 71/255)

var buttonColor: Color = Color(red: 104/255, green: 83/255, blue: 235/255)

How To Use

You must pass a bool binding into OnboardingView. When this variable is set to true the user has completed the onboarding flow.

struct ContentView: View {

    @State var onboardingComplete: Bool = false
    
    var body: some View {
        Group {
            if !onboardingComplete {
                OnboardingView(finished: $onboardingComplete)
            } else {
                Color.white
                    .overlay(Text("Onboarding Complete"))
            }
        }
    }

}