Every screen, flow, block and app template in SwiftPieces Pro, for good.All of Pro, $199 once.$199 once.Get Pro

Screen · Onboarding

SwiftUI Onboarding Flow Template

A complete SwiftUI onboarding flow, not just one screen. It runs from welcome to permissions. You can reorder them, rewrite the copy, and open it in Xcode ready to ship. Each app template also has a first-run flow with an account step and a paywall.

A complete first run on one screen: onboarding pages, a fully configurable permission step and an optional paywall handoff, joined by shared-axis pushes with an injectable completion key so it runs once.

  • SwiftUI
  • iOS 17.0+
  • onboarding-flow
Get SwiftPieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • Welcome, permission and paywall steps joined by shared-axis pushes
  • A fully configurable PermissionStep, or none
  • An optional paywall handoff
  • A completion key so it runs once
  • A .poster layout that carries the Welcome posters through every step

Includes

Welcome. Installed together, automatically.

In the Build Kit

Editorial (style), Subscription Utility (brief), Onboarding to Paywall (recipe). Your agent builds around this screen in the same design.

Used in

Subscription App (template), Meditation App (template), Travel App (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

Composes OnboardingStack, a permission step and an optional paywall, moving between them with shared-axis pushes. The permission step is a private sheet with an icon tile, benefit rows and requesting, granted and denied states; a denial swaps the copy and offers Open Settings. Every string comes from PermissionStep, and PermissionStep.notifications(...) wires UNUserNotificationCenter for you while still taking your copy. Completion is stored in AppStorage under an injectable completionKey.

Notes

  • The paywall slot hands you a finish closure: paywall: { done in GlassPaywallScreen(productIDs: ids, features: f, onUnlocked: done, onDismiss: done) }.
  • Pass permission: nil to skip the permission step; use the Paywall == EmptyView initializer to skip the paywall.
  • Reduce Motion replaces the pushes with crossfades. Haptics: .success on grant, .warning on denial.
  • layout: .poster carries the Welcome posters through the flow: the permission step becomes a poster with a large badge and benefits on overlapping color rows, and steps slide side by side as whole screens, so no frame shows two steps over each other. .fullBleed (the default) keeps the shared-axis cross-fade.
  • OnboardingPoster is public, so a paywall step can match the posters (the example's trial offer does).
  • OnboardingFlowScreenScreenExample at the end of OnboardingFlowScreen.swift is the Onboarding screen from the preview; OnboardingFlowScreenExample below it is the full-bleed version the Subscription template uses.

Theming

  • Reads SPTheme from @Environment(\.spTheme) and needs the design-system item; one .environment(\.spTheme, YourTheme()) re-skins every step.
  • The screen paints theme.color.bg behind all steps. The benefits card sits on .spSurface(.e1, in:), and the icon tile and primary buttons use accent with an accentOn label.
  • Titles use theme.type.display, so a theme's display font (for example the serif in PaperTheme) carries through the pages and the permission step.
  • Your paywall view gets the same environment, so a themed paywall matches without extra wiring.

03

Keep building

Pieces that work well next to this one.

Screen · Account

Verify

A sign-in verification screen with springing digits, SMS autofill and a shake on a wrong code.