Shadcn.io is not affiliated with official shadcn/ui
Stats Live Status Grid
A live status grid stats card for React and Next.js with a 3x3 service cell grid, semantic status dots per cell, tabular-nums live values, and a single pulsing live indicator in the header built with shadcn/ui and Tailwind CSS
Monitor a fleet of services at a glance with this live status grid stats card for React and Next.js. Features a 3x3 cell grid with compact service tiles, semantic status dots keyed to healthy, degraded, and critical states, a single pulsing animate-ping live indicator in the header, tabular-nums live values, motion/react staggered cell entrance, and threshold-aware status text. Built with TypeScript, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for SRE fleet dashboards, multi-region service health boards, Kubernetes pod status overviews, and NOC situational-awareness screens.
Related Components
React Stats Block Live Metrics
Real-time pulsing stats card
React Stats Block Live Realtime Counter
Live counter with delta
React Stats Block Live Ticker Bar
Horizontal live ticker
React Stats Block Live Countdown Stat
Countdown to next event
React Stats Block Service Health Table
Service health log table
React Stats Block KPI Status Tile Grid
KPI tiles with status dots
FAQ
Was this page helpful?
Sign in to leave feedback.
Live Realtime Counter
A live realtime counter stats card for React and Next.js with a NumberFlow animated big value, a single pulsing emerald live dot, a client-only setInterval tick, and an em-dash placeholder until first paint built with shadcn/ui and Tailwind CSS
Live Ticker Bar
A single-row live metrics ticker bar for React and Next.js with a pulsing live indicator, flex-divided compact metric cells, semantic status dots, and NumberFlow animated values built with shadcn/ui and Tailwind CSS