About Metrics Cards
An asymmetric bento grid metrics block for React and Next.js with hero metric cells, trend indicators, contextual labels, semantic color coding, and staggered grid entrance animations built with shadcn/ui and Tailwind CSS
Showcase your company traction with this asymmetric bento grid metrics block for React and Next.js. Features two hero-sized metric cells for ARR and customer count spanning two columns, six compact metric cells for NPS, churn rate, CSAT, response time, uptime, and employee satisfaction, trend indicators with directional arrows and percentage changes, semantic color coding for positive and negative trends, and staggered grid entrance animations. Built with TypeScript, motion/react staggered animations, and Tailwind CSS. Perfect for investor pages, about sections, and SaaS growth dashboards.
Related Components
Stats Large
Oversized stat numbers display
Counters Row
Animated counter metrics
By the Numbers
Narrative-driven number display
Open Metrics
Transparent company metrics
Growth Trajectory
Growth over time visualization
Community Stats
Community engagement metrics
FAQ
Was this page helpful?
Sign in to leave feedback.
Methodology
A five-step methodology stepper block for React and Next.js with numbered steps connected by vertical lines, tool badges, duration indicators, highlighted current step, and staggered entrance animations built with shadcn/ui and Tailwind CSS
Mission
A centered mission statement block for React and Next.js with hero text, supporting pillars row, and founding context built with shadcn/ui and Tailwind CSS