Onboarding Template

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.

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 howdy@TrailingClosure.com

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"))
            }
        }
    }

}