Shadcn.io is not affiliated with official shadcn/ui
Onboarding Role Selection
A React onboarding role picker with five selectable role options, icon and description per role, single-select dot indicator with ring highlight, and disabled continue button built with Next.js, TypeScript, shadcn/ui, and Tailwind CSS
Help users self-identify during onboarding with this role selection block built with React, Next.js, and TypeScript. Features five role options (Developer, Designer, Product Manager, Marketing, Founder) each with a Lucide React icon, title, and description, a single-select pattern using React state with dot indicator and ring-2 selected state, and a disabled-until-selection continue button. Uses Framer Motion staggered entrance animations and Tailwind CSS responsive styling with flexbox layout. Perfect for SaaS onboarding personalization, user segmentation flows, and role-based feature gating in React applications.
Related Components
Company Size Onboarding
Company size tier selector
Industry Picker Onboarding
Multi-select industry tag picker
Welcome Onboarding
Welcome greeting with feature highlights
Use Case Onboarding
Primary use case selection
Profile Setup Onboarding
User profile information form
Preferences Onboarding
User preferences configuration
FAQ
Was this page helpful?
Sign in to leave feedback.
Report Schedule
A React onboarding scheduled report configuration with frequency select, day-of-week picker, time select, email recipients list, and schedule action built with Next.js, TypeScript, shadcn/ui, and Tailwind CSS
Sample Data
Sample data loading onboarding with selectable datasets, ring-highlighted selection, and load action built with React, Next.js, shadcn/ui, and Tailwind CSS