Onboarding (Mobile app)
The first-run sequence that orients a new user and collects only what the app needs before it can be used.
Onboarding & Auth · 7 checks · 26 resources
Before you ship
7- 01Steps — the number of steps limited to what is genuinely required before the app can be used
- 02Progress indicator — a clear indication of how many steps remain and where in the sequence the user currently is
- 03Step navigation — a clear mechanism for advancing through steps e.g. a 'next' button or a horizontal swipe gesture
- 04Contextual permissions — permissions surfaced at their contextually relevant moment, rather than grouped at the start
- 05Skip option — a visible way to exit onboarding early and explore the app, with setup available to complete later
- 06Personalisation step — one or two choices that make the app feel tailored from the start e.g. your name, interests
- 07Keyboard handling — views that adjust when the keyboard appears, appropriate keyboard types per field, and Next advancing to the following input
Resources that help you build this
26- Material Design 3 · Google's open design system: 39 components, tokens, and Compose/Web code
- Mobbin · Searchable library of real mobile and web app screens, organized into user flows
- Mobbin MCP · MCP server that gives coding agents 621,500+ real shipped app screens
- Open Design · Local-first desktop app that turns a coding agent into a design engine
- React Native Reanimated · UI-thread animation library for React Native, v4 on the New Architecture
- Refero · Searchable library of real product screens, user flows and design systems, with an MCP server
- Rive · Vector animation editor whose State Machine files run natively in app runtimes
- Sleek · An AI mobile app designer built for coding agents, with a REST API, an OpenAPI spec, an agents.md and an installable skill
- Blush · Customizable illustration app: 65+ artist collections, mix-and-match, PNG free, SVG paid
- Driver.js · 26.6k-star, dependency-free product tours and spotlight highlights in vanilla JS
- gluestack-ui · CLI-installed React Native component library built on NativeWind and Tailwind v4
- Huashu Design · Agent skill that renders prototypes, decks, MP4 motion and infographics from prompts
- LottieFiles for Figma · Figma plugin to import Lottie animations and export frames as dotLottie
- Ripplix · 7,000+ recorded UI animations from 1,000+ real apps, filterable by element
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and native
- unDraw · ~1,760 recolourable SVG illustrations, free commercially, no attribution
- Claude Design 2-Hour Course · 118-minute walkthrough: brand to design system to shipped site with Claude Design
- Growth.Design · 53 product UX case studies as comics, plus 106 psychology principles
- Humaaans · Mix-and-match CC0 people illustrations for Sketch and Figma, by Pablo Stanley
- Lottielab · A Lottie animation editor for product teams, used by a stated 500,000 designers, that ships straight to apps and sites
- Neuform · Prompt-to-HTML page generator that emits a reusable DESIGN.md
- Page Flows · Screen recordings of real user flows from shipped iOS, Android, web, and email apps
- React Native Components · 64 copy-paste React Native screen components, $59.99 once for lifetime access
- ScreensDesign · Screen-recorded iOS app flows from ~1,500 apps, with revenue and ranking data attached
- Storyset · Freepik's editable illustrations in 5 styles, animatable, attribution required
- UI Sources · Retired mobile-UX interaction library; the domain now 301s to ScreensDesign