Shadcn.io is not affiliated with official shadcn/ui
Dashboard Performance Scores
Animated Core Web Vitals performance scores dashboard for React and Next.js with six metrics in a 3x2 grid showing score numbers with colored ring borders, rating labels, and animated entrance in a two-column layout using framer-motion, shadcn/ui, and Tailwind CSS
Monitor Core Web Vitals and performance metrics with this animated dashboard block built for React and Next.js. Six metrics including LCP, FID, CLS, TTFB, FCP, and INP display in a 3x2 grid with large tabular-nums values surrounded by colored ring borders indicating Good, Needs Work, or Poor ratings. Each metric animates in with staggered delays. A summary header shows the overall performance score. Built with TypeScript, shadcn/ui components, framer-motion, and Tailwind CSS for a polished web performance monitoring experience.
Related Components
API Usage
API request metrics dashboard
Deployment Status
Recent deployment overview
Feature Adoption
Feature adoption rate tracker
Revenue Breakdown
Revenue by source visualization
Onboarding Progress
User onboarding funnel
Budget Tracker
Budget vs spent tracking
FAQ
Was this page helpful?
Sign in to leave feedback.
Pen Test Results
Animated React penetration test results dashboard block for Next.js with finding severity breakdown, CVSS scores, remediation status tracking, expandable vulnerability details with reproduction steps, and staggered entrance animations using shadcn/ui, Tailwind CSS, and framer-motion
Permission Matrix
Animated React role permission matrix dashboard block for Next.js with a resource-by-role grid showing read write and admin toggles, color-coded access levels, expandable resource details, role column headers with user counts, and staggered entrance animations using shadcn/ui, Tailwind CSS, and framer-motion