Onboarding (Web app)
The guided setup that takes a newly signed-up account from empty to first meaningful action.
Onboarding & Auth · 6 checks · 39 resources
Before you ship
6- 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
39- Ark UI · 49 headless components with one API across React, Vue, Solid and Svelte
- GSAP · JavaScript animation engine with 19 plugins, now free for commercial use
- Impeccable · Design vocabulary and anti-slop detector for AI coding agents
- Impeccable · Design skill for AI coding agents: 23 slash commands and 59 detector rules
- Mobbin · Searchable library of real mobile and web app screens, organized into user flows
- React Bits Pro · 703 paid React items in one license-gated shadcn registry: 134 animated components, 538 blocks, 11 templates and an Agent Kit
- Refero · Searchable library of real product screens, user flows and design systems, with an MCP server
- Refero Styles · DESIGN.md files reverse-engineered from real product sites, for agents
- remocn · 282 Remotion components for product-demo video, installed by the shadcn CLI
- ReUI · 1,052 free shadcn components, 502 pro blocks, 10 templates, hosted MCP
- Rive · Vector animation editor whose State Machine files run natively in app runtimes
- abtest.design · 47 documented A/B tests from Blinkist, Duolingo, Headspace, Uber and others, each with the winning variant and the measured lift
- Animista · Pick-and-tweak CSS keyframe animations; copy only the ones you use, BSD-licensed
- Atlassian Design System · Atlaskit: 59 Apache-2.0 React components behind Jira, Confluence and Bitbucket
- Blush · Customizable illustration app: 65+ artist collections, mix-and-match, PNG free, SVG paid
- Clerk shadcn Registry · shadcn CLI commands that scaffold Clerk auth pages and middleware into a Next.js app
- Cult UI · 82 free design-engineer components plus 10 paid full-stack AI starters
- Driver.js · 26.6k-star, dependency-free product tours and spotlight highlights in vanilla JS
- hue · Agent skill that turns any brand URL or screenshot into a design system
- Open Doodles · 33 CC0 hand-drawn figure illustrations as direct SVG, PNG and GIF downloads
- React Joyride · Guided product tours for React, v3 with a hook API
- Ripplix · 7,000+ recorded UI animations from 1,000+ real apps, filterable by element
- Shadcnblocks · 1,837 paid shadcn blocks and 19 Next.js and Astro templates, lifetime license
- Shark UI · 86 shadcn-style components built on Ark UI, installed through the shadcn CLI
- Transhumans · CC0 black-and-white character illustrations in SVG and PNG
- Tremor · 40 copy-paste React chart and dashboard components, plus 300+ free blocks
- unDraw · ~1,760 recolourable SVG illustrations, free commercially, no attribution
- Coachmark · Unstyled React primitive for product tours, built on Base UI Popover
- DrawKit · 100+ hand-drawn 2D/3D illustration, icon and Lottie packs; ~40 free, rest behind Pro
- 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
- Nicely Done · Searchable index of ~199k SaaS screens, 12.5k flows and 29k UI components
- Open Peeps · CC0 hand-drawn people illustrations you mix from modular parts
- Spline · Browser-based 3D design tool that exports interactive scenes to React, web components and native
- Storyset · Freepik's editable illustrations in 5 styles, animatable, attribution required
- Tark UI · One-page showcase of 41 Ark UI components with 333 Tailwind-styled examples
- The 3-Second Clarity Test · Essay on testing whether a product's UI explains itself in three seconds
- UX Pilot · AI generates wireframes and hi-fi UI screens, then exports them into Figma
- React Spotlight Tour · Tiny ref-based React tour overlay, unmaintained since 2021