Homechevron_rightUI Componentschevron_rightOnboarding Pages Pack

Onboarding Pages Pack screenshot 1
UI Components

Onboarding Pages Pack

16 production-ready onboarding page components for SaaS apps. 8 screens × 2 layouts (Centered + Stepped with progress bar) — every component you need to take a new user from signup to dashboard. Each file is self-contained with zero shared imports. Drop in only the screens you need, or use the full 8-step flow. CSS variable theming with --onboarding-* namespace — swap the accent colour in one line. Includes a scrollable dev gallery showing all 16 variants side by side, plus a full README with props reference and CSS variable documentation.

nextjstypescripttailwindreact

inventory_2What's included

  • check_circle16 onboarding page components (8 screens × 2 layouts)
  • check_circleWelcome screen with app logo placeholder and CTA
  • check_circleProfile Setup with first/last name, job title, avatar upload
  • check_circleWorkspace Setup with live slug preview and auto-formatting
  • check_circleInvite Team with email chips, role dropdown, backspace to remove
  • check_circleChoose Goal single-select card grid (2 or 3 columns)
  • check_circleFeature Highlights read-only feature card grid
  • check_circleConnect App with per-integration connect state
  • check_circleSetup Complete celebration screen
  • check_circleCentered layout (standalone /onboarding route)
  • check_circleStepped layout (progress bar + step counter)
  • check_circleOnboardingPagesDemo.tsx dev gallery of all 16 variants
  • check_circleREADME with full props reference and CSS variables
£19

One-time payment · no subscription

lockSecure checkout via Stripe
downloadInstant delivery after payment
workspace_premiumBuilt and tested by practitioners
devicesWorks with: React 18+, Next.js 14+ (App Router), Tailwind CSS v3 or v4, TypeScript

More like this

Billing Pages Pack

UI Components

Billing Pages Pack

£29Viewarrow_forward
Empty States Pack

UI Components

Empty States Pack

12 production-ready empty state components for your SaaS. No results, errors, empty inbox, offline, no access, and more — each with an abstract geometric illustration that picks up your brand colour via CSS variables. Single component API plus named imports. React + Tailwind, zero dependencies, Server Component compatible.

£9Viewarrow_forward
Waitlist Page

UI Components

Waitlist Page

A coming-soon waitlist section for your SaaS. Drop it into any page or use as a full-screen launch page. Email capture with validation, animated submit states, signup count from your own API, and confetti on success. Themed with 7 CSS variables. React + Tailwind + canvas-confetti.

£9Viewarrow_forward