Onboarding (Mobile app)
Onboarding & Auth · 7 checks · 27 resources
The first-run sequence that orients a new user and collects only what the app needs before it can be used.
Before you ship
- 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
- Material Design 3 · Google's open design system: 39 components, tokens, and Compose/Web codeDesign Systems & Brand GuidelinesS
- Mobbin · Searchable library of real mobile and web app screens, organized into user flowsInspiration GalleriesS
- Mobbin MCP · MCP server that gives coding agents 621,500+ real shipped app screensAgent Design ToolingS
- Open Design · Local-first desktop app that turns a coding agent into a design engineAgent Design ToolingS
- React Native Reanimated · UI-thread animation library for React Native, v4 on the New ArchitectureMotion & InteractionS
- Refero · Searchable library of real product screens, user flows and design systems, with an MCP serverInspiration GalleriesS
- Rive · Vector animation editor whose State Machine files run natively in app runtimesMotion & InteractionS
- Sleek · An AI mobile app designer built for coding agents, with a REST API, an OpenAPI spec, an agents.md and an installable skillAgent Design ToolingS
- Blush · Customizable illustration app: 65+ artist collections, mix-and-match, PNG free, SVG paidTextures, Backgrounds & AssetsA
- Driver.js · 26.6k-star, dependency-free product tours and spotlight highlights in vanilla JSMotion & InteractionA
- gluestack-ui · CLI-installed React Native component library built on NativeWind and Tailwind v4Component LibrariesA
- Huashu Design · Agent skill that renders prototypes, decks, MP4 motion and infographics from promptsAgent Design ToolingA
- LottieFiles for Figma · Figma plugin to import Lottie animations and export frames as dotLottieMotion & InteractionA
- Ripplix · 7,000+ recorded UI animations from 1,000+ real apps, filterable by elementInspiration GalleriesA
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and nativeComponent LibrariesA
- unDraw · ~1,760 recolourable SVG illustrations, free commercially, no attributionTextures, Backgrounds & AssetsA
- useAnimations · 298 free MIT animated Lottie icons with a React package, a shadcn registry, and an agent catalogIcons & LogosA
- Claude Design 2-Hour Course · 118-minute walkthrough: brand to design system to shipped site with Claude DesignEssays, Guides & CoursesB
- Growth.Design · 53 product UX case studies as comics, plus 106 psychology principlesEssays, Guides & CoursesB
- Humaaans · Mix-and-match CC0 people illustrations for Sketch and Figma, by Pablo StanleyTextures, Backgrounds & AssetsB
- Lottielab · A Lottie animation editor for product teams, used by a stated 500,000 designers, that ships straight to apps and sitesMotion & InteractionB
- Neuform · Prompt-to-HTML page generator that emits a reusable DESIGN.mdAgent Design ToolingB
- Page Flows · Screen recordings of real user flows from shipped iOS, Android, web, and email appsInspiration GalleriesB
- React Native Components · 64 copy-paste React Native screen components, $59.99 once for lifetime accessComponent LibrariesB
- ScreensDesign · Screen-recorded iOS app flows from ~1,500 apps, with revenue and ranking data attachedInspiration GalleriesB
- Storyset · Freepik's editable illustrations in 5 styles, animatable, attribution requiredTextures, Backgrounds & AssetsB
- UI Sources · Retired mobile-UX interaction library; the domain now 301s to ScreensDesignInspiration GalleriesC