Shadcn.io is not affiliated with official shadcn/ui
Stats Status Matrix Grid
A status matrix grid stats card for React and Next.js with rows of services and columns of time-slot checks, colored square cells for pass fail and warning states, row summary percentages, and semantic status encoding built with shadcn/ui and Tailwind CSS
Monitor service health across time with this status matrix grid stats card for React and Next.js. Features a grid where rows represent six services and columns represent eight time-check windows, each cell is a small colored square indicating pass (emerald), fail (red), or degraded (amber) status, a summary column on the right showing uptime percentage per service, and a header with overall system status. Built with TypeScript, pure CSS grid layout, motion/react parent entrance with useReducedMotion, and Tailwind CSS. Perfect for uptime monitoring dashboards, CI/CD pipeline health grids, SLA compliance trackers, and multi-service status pages.
Related Components
React Stats Block Service Health
Service uptime table
React Stats Block Live Status Grid
Live status cell matrix
React Stats Block Activity Streak
Heatmap activity grid
React Stats Block Heatmap Legend
Heatmap with legend
React Stats Block Live Metrics
Real-time pulsing metrics
React Stats Block Hourly Heatmap
Hourly activity grid
FAQ
Was this page helpful?
Sign in to leave feedback.
Stacked Percentage Bar Card
A 100% stacked horizontal bar stats card for React and Next.js with a single thick segmented bar showing proportional distribution, chart-token colored flex segments, a legend with percentages, and a dominant-segment header callout built with shadcn/ui and Tailwind CSS
Step Line Chart Card
A step line chart stats card for React and Next.js with a ChartContainer-wrapped Recharts LineChart using type=stepAfter, discrete tier markers, a NumberFlow-animated current-tier value, and a quantized trend indicator built with shadcn/ui and Tailwind CSS