Shadcn.io is not affiliated with official shadcn/ui
React Dashboard Learning Progress Block
Animated React learning progress dashboard block for Next.js with four courses showing animated progress bars, completion percentages, modules completed counts, time spent tracking, certificate status, and header summary with total hours and active courses using shadcn/ui, Tailwind CSS, and framer-motion
Track your team's training and development with this animated learning progress dashboard block. Four courses display animated progress bars powered by framer-motion, completion percentages, modules completed out of total, time spent, and certificate status. The header summarizes total learning hours and courses in progress. Built with React, TypeScript, shadcn/ui, and framer-motion.
React Dashboard Learning Progress Block preview
Installation
Related Components
Code Quality
Code quality metrics with coverage and tech debt
Customer Feedback
NPS and CSAT feedback dashboard
Meeting Schedule
Daily meeting schedule with join actions
Dashboard Overview
KPI metrics overview with trend indicators
Compliance Status
Regulatory compliance tracking dashboard
Uptime Monitor
Service availability with 30-day charts
FAQ
Was this page helpful?
Sign in to leave feedback.
React Animated Lead Sources Dashboard Block
Animated lead source attribution dashboard for React and Next.js with eight sources showing lead counts in tabular-nums, conversion rates, cost per lead, and horizontal volume bars in a two-column table layout using framer-motion, shadcn/ui, and Tailwind CSS
React License Compliance Dashboard Block
Animated React software license compliance dashboard for Next.js with dependency scan results, license risk levels, expandable package details, and violation alerts using shadcn/ui, Tailwind CSS, and framer-motion