Shadcn.io is not affiliated with official shadcn/ui
Stats Service Health Table
A service health stats table for React and Next.js with monospace service names, per-row status dots, tabular-nums uptime, response time, error rate columns, and border-b row dividers built with shadcn/ui and Tailwind CSS
Monitor the health of your production services at a glance with this service health stats table for React and Next.js. Features a bg-card container with monospace service name cells, per-row status dots (emerald / amber / red) tied to SLO state, tabular-nums uptime percentages, median response time, error rate columns, and responsive py-3 border-b row dividers. Built with TypeScript, shadcn/ui primitives, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for SRE dashboards, SaaS status pages, microservice monitoring views, and incident response consoles.
Related Components
React Stats Block API Usage
Per-endpoint usage table
React Stats Block Rate Limit Table
Rate limit table
React Stats Block Job Queue Table
Job queue health table
React Stats Block Log Frequency Table
Log frequency table
React Stats Block Live Metrics
Real-time pulsing card
React Stats Block Live Status Grid
Live status grid
FAQ
Was this page helpful?
Sign in to leave feedback.
Scatter Plot Card
A scatter plot stats card for React and Next.js with Recharts ScatterChart showing correlation between two metrics, quadrant reference lines at median values, labeled zones, ChartTooltip with both values, and tabular-nums axis labels built with shadcn/ui and Tailwind CSS
Slope Chart Card
A slope chart stats card for React and Next.js with SVG lines connecting two time-point columns showing direction-keyed emerald and red slopes, positioned value dots, delta labels, and a criss-crossing visual pattern built with shadcn/ui and Tailwind CSS