Tailwind stats strip of centered value and label cells split by hairlines, two columns on mobile and four on desktop. Shows traction numbers on landing pages.
npx shadcn@latest add @minidev/stats-stripCode Stats sections and animated counters for React
Free stats section components for React and Tailwind CSS: headline number strips, animated counters, metric tiles with deltas, a split-flap stat board and a metric ticker. MIT.
8 blocksFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Stats sections turn traction into a sentence: customers, revenue processed, uptime, countries. The counter versions animate the numbers in when they scroll into view and stay still with reduced motion.
Stats Counter
motionA single stat that counts up from zero to its value once it is in view, with a label below. Combine several in a row for landing page metrics.
npx shadcn@latest add @minidev/stats-counterCode Responsive Tailwind row of admin KPI tiles, each with a label, a large tabular value and an optional up or down delta. Collapses from four columns to one.
npx shadcn@latest add @minidev/admin-stat-stripCode Metric Ticker Board
motionA four cell metric board where each number counts up from zero with an eased tween when it enters the viewport, with optional suffixes like plus or %.
npx shadcn@latest add @minidev/metric-ticker-boardCode Flip Stat Board
motionA stat board where each number counts up with digits that flip in on a spring once in view. Pass values and labels; reduced motion shows the final value.
npx shadcn@latest add @minidev/flip-stat-boardCode A tiny percentage change indicator with an up arrow in green for gains and a down arrow in red for losses. Pair it with stat cards, KPI tiles and table cells.
npx shadcn@latest add @minidev/metric-deltaCode An odometer style animated number where each digit rolls on a spring and only changed digits move. Supports Intl formatting, trend tint and reduced motion.
npx shadcn@latest add @minidev/number-rollCode Frequently asked questions
How do I animate a number counting up in React?
NumberRoll rolls each digit with a spring and announces the final value to screen readers. StatsCounter wraps it for a whole section and triggers when the block scrolls into view.