Onboarding (Web app)
Onboarding & Auth · 6 checks · 42 resources
The guided setup that takes a newly signed-up account from empty to first meaningful action.
Before you ship
- 01Progress indicator — an indication of how many steps are involved and where the user currently is in the sequence
- 02Welcome message — a brief message acknowledging this is a new experience and orienting the user toward what the product does
- 03Account setup — the minimum information needed to personalise the experience, gathered at the start
- 04Product highlights — key features introduced through short contextual tips or a visual walkthrough
- 05First action prompt — a clear prompt directing the user to an action or feature
- 06Completion confirmation — a clear acknowledgement that setup is complete, transitioning the user into the main product
Resources that help you build this
- Ark UI · 49 headless components with one API across React, Vue, Solid and SvelteComponent LibrariesS
- GSAP · JavaScript animation engine with 19 plugins, now free for commercial useMotion & InteractionS
- Impeccable · Design vocabulary and anti-slop detector for AI coding agentsAgent Design ToolingS
- Impeccable · Design skill for AI coding agents: 23 slash commands and 59 detector rulesAgent Design ToolingS
- Mobbin · Searchable library of real mobile and web app screens, organized into user flowsInspiration GalleriesS
- React Bits Pro · 703 paid React items in one license-gated shadcn registry: 134 animated components, 538 blocks, 11 templates and an Agent KitComponent LibrariesS
- Refero · Searchable library of real product screens, user flows and design systems, with an MCP serverInspiration GalleriesS
- Refero Styles · DESIGN.md files reverse-engineered from real product sites, for agentsAgent Design ToolingS
- remocn · 282 Remotion components for product-demo video, installed by the shadcn CLIMotion & InteractionS
- ReUI · 1,052 free shadcn components, 502 pro blocks, 10 templates, hosted MCPComponent LibrariesS
- Rive · Vector animation editor whose State Machine files run natively in app runtimesMotion & InteractionS
- abtest.design · 47 documented A/B tests from Blinkist, Duolingo, Headspace, Uber and others, each with the winning variant and the measured liftInspiration GalleriesA
- affectUI · 93 React components, screens, and blocks for AI products, each one dependency-free fileAI Interface KitsA
- Animista · Pick-and-tweak CSS keyframe animations; copy only the ones you use, BSD-licensedMotion & InteractionA
- Atlassian Design System · Atlaskit: 59 Apache-2.0 React components behind Jira, Confluence and BitbucketDesign Systems & Brand GuidelinesA
- Blush · Customizable illustration app: 65+ artist collections, mix-and-match, PNG free, SVG paidTextures, Backgrounds & AssetsA
- Clerk shadcn Registry · shadcn CLI commands that scaffold Clerk auth pages and middleware into a Next.js appComponent LibrariesA
- Cult UI · 82 free design-engineer components plus 10 paid full-stack AI startersComponent LibrariesA
- Driver.js · 26.6k-star, dependency-free product tours and spotlight highlights in vanilla JSMotion & InteractionA
- hue · Agent skill that turns any brand URL or screenshot into a design systemAgent Design ToolingA
- Lordicon · 48,100+ hand-animated icons in Lottie, GIF, SVG, and more, with a web component, React package, and APIIcons & LogosA
- Open Doodles · 33 CC0 hand-drawn figure illustrations as direct SVG, PNG and GIF downloadsTextures, Backgrounds & AssetsA
- React Joyride · Guided product tours for React, v3 with a hook APIComponent LibrariesA
- Ripplix · 7,000+ recorded UI animations from 1,000+ real apps, filterable by elementInspiration GalleriesA
- Shadcnblocks · 1,837 paid shadcn blocks and 19 Next.js and Astro templates, lifetime licenseBlocks, Templates & ThemesA
- Shark UI · 86 shadcn-style components built on Ark UI, installed through the shadcn CLIComponent LibrariesA
- Transhumans · CC0 black-and-white character illustrations in SVG and PNGTextures, Backgrounds & AssetsA
- Tremor · 40 copy-paste React chart and dashboard components, plus 300+ free blocksComponent LibrariesA
- unDraw · ~1,760 recolourable SVG illustrations, free commercially, no attributionTextures, Backgrounds & AssetsA
- Coachmark · Unstyled React primitive for product tours, built on Base UI PopoverComponent LibrariesB
- DrawKit · 100+ hand-drawn 2D/3D illustration, icon and Lottie packs; ~40 free, rest behind ProTextures, Backgrounds & AssetsB
- 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
- Nicely Done · Searchable index of ~199k SaaS screens, 12.5k flows and 29k UI componentsInspiration GalleriesB
- Open Peeps · CC0 hand-drawn people illustrations you mix from modular partsTextures, Backgrounds & AssetsB
- SaaSFrame · 5,000+ SaaS screens, flows, emails, patterns, responsive views, Figma files and screenshot text searchInspiration GalleriesB
- Spline · Browser-based 3D design tool that exports interactive scenes to React, web components and nativeMotion & InteractionB
- Storyset · Freepik's editable illustrations in 5 styles, animatable, attribution requiredTextures, Backgrounds & AssetsB
- Tark UI · One-page showcase of 41 Ark UI components with 333 Tailwind-styled examplesComponent LibrariesB
- The 3-Second Clarity Test · Essay on testing whether a product's UI explains itself in three secondsEssays, Guides & CoursesB
- UX Pilot · AI generates wireframes and hi-fi UI screens, then exports them into FigmaAgent Design ToolingB
- React Spotlight Tour · Tiny ref-based React tour overlay, unmaintained since 2021Component LibrariesC