Stop Rebuilding UI
Previous: Kpi Icon Tile Grid
Next: Kpi Sparkline Tile Grid

Stats Kpi Ratio Tile Grid

A KPI ratio tile grid stats block for React and Next.js with current/target ratio values, tabular-nums delta pills, and threshold-colored progress bars anchored to each tile built with shadcn/ui and Tailwind CSS

Scroll to load preview

Scan quarterly progress at a glance with this KPI ratio tile grid stats card for React and Next.js. Features a 2x2 responsive tile grid, tabular-nums current/target ratio values, threshold-keyed progress bars with emerald/amber/red states, NumberFlow-animated current values, motion/react staggered tile entrance, and inline delta pills comparing each metric to the previous period. Built with TypeScript, NumberFlow from @number-flow/react, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for OKR dashboards, sales quota tracking, sprint velocity boards, and quarterly review pages.

React Stats Block KPI Tile Grid Quad

Four-up KPI tile grid with change %

React Stats Block KPI Sparkline Tile Grid

KPI tiles with inline sparklines

React Stats Block Goal Target Tile Grid

Goal tiles with target ratios

React Stats Block Progress With Target Ratio

Linear progress with target ratio

React Stats Block KPI Status Tile Grid

KPI tiles with health status dots

React Stats Block OKR Target Cards

OKR target progress cards

FAQ

Last updated on April 12, 2026

Was this page helpful?

Sign in to leave feedback.

Kpi Icon Tile Grid

A KPI tile grid stats block for React and Next.js with muted-square lucide icon badges, tabular-nums metric values, and semantic change deltas built with shadcn/ui and Tailwind CSS

Kpi Sparkline Tile Grid

A hybrid KPI tile grid stats block for React and Next.js with four tiles each pairing a tabular-nums headline value, a trend-keyed semantic delta, and an inline ChartContainer sparkline AreaChart built with shadcn/ui and Tailwind CSS