Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dialog - Onboarding
A multi-step onboarding dialog with progress indicators, media content, and skip functionality for user introduction flows
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
First-time user experiences determine retention. This React dialog guides users through multi-step onboarding with visual media, progress dots, and skip options using shadcn/ui components. Built with Dialog, state-driven step progression, and Lucide icons, users advance through welcome, features, and call-to-action screens. Perfect for SaaS product tours like Slack or Figma, new feature announcements, or any application where guided introductions improve activation and reduce user confusion.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Standard Dialog
Basic modal dialog structure
Button Component
Action buttons
Plan Selection Dialog
Multi-option selection interface
Signup Dialog
User registration form
Edit Profile Dialog
Complex form with media
Badge Component
Status indicators