screens/DSOnboardingCarousel

DSOnboardingCarousel

screens
since 0.1.0

Paged onboarding with an icon, title and subtitle per step, page dots, and Skip / Next / Get started buttons.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

Introduce an app's key features on first launch.

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]—Pages. Each step has icon, iconColor, title, subtitle and optional detail.
onCompletereq() -> Void—Called when the user finishes the last step.
onSkip(() -> Void)?nilShows a Skip button when set.

Examples

First launch

Three steps, skippable.

swift
DSOnboardingCarousel(
    steps: [
        DSOnboardingStep(icon: "sparkles", title: "Welcome", subtitle: "Everything you need in one place."),
        DSOnboardingStep(icon: "bell.badge.fill", iconColor: DSColor.warning, title: "Stay in the loop",
                         subtitle: "Get notified when something changes."),
        DSOnboardingStep(icon: "lock.fill", iconColor: DSColor.success, title: "Private by default",
                         subtitle: "Your data stays on your device."),
    ],
    onComplete: { hasSeenOnboarding = true },
    onSkip: { hasSeenOnboarding = 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