Authentication
Onboarding Slides
A swipeable onboarding flow for first-time users with icon-based slides, skip/next/done controls, optional autoplay, and navigation handoff when users skip or finish.
Perfect for explaining value before users reach authentication.
Slide visuals use slideXIconName; image uploads are intentionally not used.
Configured in the Actions tab for completion and skip navigation.
Four things worth knowing
BuilderOnboardingSlides provides a structured onboarding flow with explicit slide props, grouped editor fields, and predictable navigation behavior.
3 to 6 explicit slides
Uses slideCount with explicit slide props (slide1Title … slide6IconName) to control how many slides render.
Icon-based content only
Slides use icon names for visuals. Image upload fields and slide image URLs are intentionally removed from the editing flow.
Configurable behavior controls
Skip, next, done, dots, autoplay, and autoplay interval are all configurable from Behavior settings.
Done and skip navigation handoff
On finish/skip, callbacks can run first, then navigation uses doneScreenId (with legacy action fallback support).
Find it, drop it, wire it up
Where to find it
- Open the Builder component picker.
- Go to Authentication.
- Select Onboarding Slides.
- Drop it onto the first screen new users should see.
Recommended setup
- In Quick Setup, set
slideCountbetween 3 and 6. - Fill each Slide X group with title, description, and icon name.
- In Behavior and Style, tune controls, autoplay, and visual tokens.
- In Actions, set
doneScreenIdand verify skip/done navigation in Preview.
What you can configure in the editor
| Group | Prop | Default | What it controls |
|---|---|---|---|
| Quick Setup | slideCount | 3 | Number of active slides. Minimum 3, maximum 6. |
| Per-slide content | slideXTitle, slideXDescription, slideXIconName | Slide defaults | Content fields for Slide 1 to Slide 6. Slides beyond slideCount are ignored. |
| Behavior | showSkip, showDots, showNextButton, skipText, nextText, doneText, autoPlay, autoPlayInterval | Mixed defaults | Controls visibility, labels, and movement behavior for onboarding progression. |
| Style | backgroundColor, primaryColor, textColor, subtitleColor, iconColor, iconBackgroundColor, titleFontSize, subtitleFontSize, iconSize, buttonBorderRadius | Theme defaults | Visual tokens for slide surface, icon treatment, typography scale, and button shape. |
| Actions | doneScreenId | none | Destination screen used when onboarding is completed or skipped. |
| Runtime | isPreview | false | Enables swipe and action interactions in preview/live runtime. |
| Legacy fallback | onPressAction, actionData | optional | Fallback navigation path used when doneScreenId is not available. |
Make it yours
| Setting | Where | What changes |
|---|---|---|
| Primary Color | Style | Main action button, interactive accents, and active UI highlights. |
| Background / Text Colors | Style | Screen surface, headline colour, and subtitle readability across all slides. |
| Icon Colors and Size | Style | Icon foreground, icon background, and icon scale for every slide. |
| Dots / Next / Skip visibility | Behavior | Controls whether progress dots and navigation controls appear during onboarding. |
| Autoplay and Interval | Behavior | Automatically advances slides at the configured interval when autoplay is enabled. |
Common mistakes to avoid
Keep slide count between 3 and 6
Use slideCount as the source of truth. Slide 4/5/6 only appear when the count includes them.
Do not reintroduce image fields
This component is icon-first. Keep slideXIconName editing and avoid image URL/upload fields unless requirements explicitly change.
Configure navigation in Actions tab
Set doneScreenId in Actions and test both skip and done paths in Preview to verify expected routing.
Verify app-name substitution in titles
When slide titles contain Your App, runtime should replace it with currentApp?.name from context.