screens/DSOnboardingFlow

DSOnboardingFlow

screens
since v2.0

Multi-step onboarding flow with a step indicator, transition animations between screens, forward/back buttons, and a skip option.

iOS 17+

Purpose

Introduce new features or guide users through initial app setup. Reduces churn in first sessions.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

PropTypeDefaultDescription
stepsreq[DSOnboardingStep]—Array of steps with icon, title, body, and an optional custom view.
onCompletereq(() -> Void)—Callback on completion.
onSkip(() -> Void)?nilAllows skipping the onboarding.
accentColorColorDSColor.primaryColour of highlighted elements.

Examples

Initial onboarding

3 introduction screens.

swift
DSOnboardingFlow(
    steps: [
        DSOnboardingStep(
            icon: "sparkles",
            title: "Welcome to Acme",
            body: "The fastest platform to manage your projects.",
            accentColor: DSColor.primary
        ),
        DSOnboardingStep(
            icon: "person.2.fill",
            title: "Collaborate as a team",
            body: "Invite members and work together in real time.",
            accentColor: DSColor.accent
        ),
        DSOnboardingStep(
            icon: "chart.line.uptrend.xyaxis",
            title: "Track progress",
            body: "Automatic dashboards and reports for faster decisions.",
            accentColor: DSColor.success
        ),
    ],
    onComplete: { appState.didCompleteOnboarding = true },
    onSkip: { appState.didCompleteOnboarding = true }
)

Usage Guidelines

  • Maximum of 4 steps per flow. Above that, consider splitting into sub-flows.
  • Always offer a skip option for experienced users.
  • Avoid dense text; prefer icons and short phrases.

Related Components

ProgressBarModal