Shadcn.io is not affiliated with official shadcn/ui
AI Learning Path
A vertical timeline learning path block for React and Next.js with module nodes, progress tracking, skill badges, lesson counts, and completion states built with shadcn/ui and Tailwind CSS
Build an interactive AI-powered curriculum timeline with this learning path block for React and Next.js. Features a vertical timeline with color-coded module nodes showing completed, in-progress, and locked states, expandable lesson lists with duration estimates, skill tag badges, and an animated progress bar tracking overall completion. Built with TypeScript, shadcn/ui Badge, Button, and Tooltip components, motion/react staggered entrance animations, and Tailwind CSS. Perfect for online course platforms, developer bootcamps, and AI-driven education dashboards.
Related Components
AI Onboarding Wizard
Step-by-step AI onboarding flow
AI Tutor Chat
Conversational AI tutoring interface
AI Knowledge Base
AI-powered knowledge management
AI Evaluation Results
AI model evaluation dashboard
AI Performance Metrics
AI system performance tracking
AI Research Chat
Research-focused AI chat interface
FAQ
Was this page helpful?
Sign in to leave feedback.
Knowledge Base
A sidebar and content AI knowledge base block for React and Next.js with searchable article tree, AI-generated summaries, related articles, and category navigation built with shadcn/ui and Tailwind CSS
Legal Assistant
A legal document review assistant block for React and Next.js with sidebar clause navigation, AI-powered risk annotations, suggested edits, and contract analysis using shadcn/ui and Tailwind CSS