Shadcn.io is not affiliated with official shadcn/ui
Onboarding Learning Path
Course track selector with quick start, full course, and self-paced exploration options for React and Next.js. Built with TypeScript, shadcn/ui, and Tailwind CSS.
Guide users to the right learning experience with this course path selector for React and Next.js onboarding. Features three selectable learning tracks (Quick Start 10min, Full Course 2hrs, Self-Paced exploration) with Lucide React icons, estimated completion times, lesson counts shown in shadcn/ui Badges, and single-select behavior with visual ring indicators. Built with TypeScript interfaces, shadcn/ui Button and Badge components, Framer Motion staggered entrance animations, and Tailwind CSS. Perfect for SaaS product academies, developer onboarding platforms, educational apps, and knowledge base tour flows where users benefit from personalized learning paths.
Related Components
Guided Walkthrough
Interactive step-by-step product tour
Goal Setting
Primary goal selection step
Skill Assessment
User skill level evaluation
First Project
Project creation wizard step
Video Intro
Product introduction video player
Onboarding Checklist
Setup task checklist with progress
FAQ
Was this page helpful?
Sign in to leave feedback.
Layout Preference
Dashboard density selector with compact, comfortable, and spacious wireframe previews for React and Next.js. Built with TypeScript, shadcn/ui, and Tailwind CSS.
Mentor Match
Mentor preference selector with profile reveal for React and Next.js. Features industry, role, and random matching options. Built with TypeScript, shadcn/ui, Tailwind CSS.