Shadcn.io is not affiliated with official shadcn/ui
AI Tutor Chat
An educational AI tutor chat block for React and Next.js with quiz cards, hint system, progress tracking, knowledge assessment, and step-by-step reasoning built with shadcn/ui and Tailwind CSS
Create an interactive AI tutor chat with quiz cards and progress tracking in React and Next.js. Features a scrollable chat interface with embedded multiple-choice quiz cards, a collapsible hint system, topic progress dots, knowledge level badges, and AI reasoning display for step-by-step explanations. Built with TypeScript, shadcn/ui Avatar, Badge, Button, and Textarea components, AI SDK Message and Reasoning components, motion/react animations, and Tailwind CSS. Perfect for EdTech platforms, interactive coding courses, language learning apps, and adaptive tutoring systems.
Related Components
AI Chat With Context
Chat with contextual information panel
AI Learning Path
Structured learning path interface
AI Chat Threaded
Threaded conversation interface
AI Research Chat
Research-focused chat interface
AI Interview Coach
Interview preparation assistant
AI Chat With Tools
Chat with integrated tool calling
FAQ
Was this page helpful?
Sign in to leave feedback.
Translation Panel
A split panel translation block for React and Next.js with side-by-side source and target text, language selectors, alternative translations, glossary terms, and quality confidence scoring built with shadcn/ui and Tailwind CSS
Usage Dashboard
A bento grid AI usage dashboard block for React and Next.js with request counts, token consumption bars, cost breakdown, model distribution, rate limit status, and trend indicators built with shadcn/ui and Tailwind CSS