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.

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