React AI Learning Path Block

React AI learning path generator block for Next.js with topic input, skill level selector, vertical timeline modules, progress tracking, and resource links using shadcn/ui and Tailwind CSS

Generate personalized AI learning paths for your React or Next.js education platform with this TypeScript block. Users enter a topic and skill level, then receive a vertical timeline of 6-8 modules with duration badges, difficulty indicators, resource links, and completion checkboxes. An overall progress bar tracks advancement through the curriculum. Built with shadcn/ui, Tailwind CSS, and AI SDK patterns for seamless integration into LMS platforms, bootcamps, and self-paced learning apps.

React AI Learning Path Block preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/ai-learning-path.json

npx shadcn@latest add https://www.shadcn.io/r/ai-learning-path.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/ai-learning-path.json

bunx shadcn@latest add https://www.shadcn.io/r/ai-learning-path.json

AI Message

Chat message component

AI Reasoning

Thinking display

AI Actions

Action toolbar

AI Suggestion

Quick reply buttons

FAQ

Last updated on March 15, 2026

Was this page helpful?

React AI Knowledge Base Block

React AI knowledge base search block for Next.js with category filters, relevance scoring, and highlighted matches using shadcn/ui and Tailwind CSS

React AI Legal Assistant Block

React AI legal assistant chat block for Next.js with case citations, reasoning analysis, source references, and formal styling using shadcn/ui and Tailwind CSS

React AI Learning Path Block