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

Onboarding TabView Basic

Multi-page swipeable onboarding carousel with page dots and persistent "Continue" button.

SwiftUI Implementation

Pure Vanilla Swift • No Dependencies
onboardingTabViewBasic.swift
import SwiftUI

struct OnboardingTabViewBasic: View {
    
    let blueish: Color = Color(red: 0.42, green: 0.4, blue: 0.84)
    let pinkish: Color = Color(red: 0.92, green: 0.43, blue: 0.43)
    
    var body: some View {
        TabView {
         OnboardingTabViewBasicSlide(iconName: "swift", title: "SwiftUI Components", subtitle: "Choose from 100+ components and templates.")
        OnboardingTabViewBasicSlide(iconName: "doc.on.doc", title: "Copy & Share", subtitle: "Second slide subtitle")
        OnboardingTabViewBasicSlide(iconName: "globe", title: "Third slide title", subtitle: "Third slide subtitle")
        }
        .background(Gradient(colors: [blueish, pinkish]))
        .tabViewStyle(.page)
        .safeAreaInset(edge: .bottom) {
            OnboardingTabViewBasicButton(label: "Get Started") {
                print("get started")
            }
        }
    }
}

#Preview {
    OnboardingTabViewBasic()
}

struct OnboardingTabViewBasicSlide: View {
    
    let iconName: String
    let title: String
    let subtitle: String
    
    var body: some View {
        VStack(alignment: .center) {
            Image(systemName: iconName)
                .resizable()
                .scaledToFit()
                .frame(width: 120, height: 120)
                .clipShape(.rect(cornerRadius: 22))
                .shadow(color: .gray.opacity(0.6), radius: 1)
                .padding(.bottom)
            VStack(alignment: .center, spacing: 8) {
                Text(title)
                    .font(.title)
                    .fontWeight(.semibold)
                    .foregroundStyle(.primary)
                    .frame(maxWidth: 350)
                Text(subtitle)
                    .font(.title3)
                    .fontWeight(.regular)
                    .foregroundStyle(.primary)
                    .multilineTextAlignment(.center)
                    .frame(maxWidth: 350)
            }
        }
        .padding()
    }
}

struct OnboardingTabViewBasicButton: View {
    
    let label: String
    let action: () -> Void
    
    var body: some View {
        Button {
            action()
        } label: {
            HStack(spacing: 8) {
                Text(label)
            }
            .padding()
            .font(.headline)
            .foregroundStyle(.white)
            .frame(alignment: .center)
        }
        .frame(maxWidth: 450)
        .background(.tint)
        .clipShape(Capsule())
        .padding()
        .help("Accessibility hint, eg. Button to start to use the app.")
    }
}

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
Free
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