Shadcn.io is not affiliated with official shadcn/ui
Stats Log Frequency Table
A log level frequency table stats card for React and Next.js with monospace level labels, tabular-nums total counts, events-per-minute columns, and inline relative frequency bars tinted by semantic severity built with shadcn/ui and Tailwind CSS
Audit log volume by severity at a glance with this log frequency table stats card for React and Next.js. Features a dense table of five log levels rendered as divide-y rows with font-mono uppercase labels, tabular-nums total event counts, events-per-minute columns, inline relative frequency bars tinted by semantic severity (red for ERROR, amber for WARN, blue for INFO, muted for DEBUG and TRACE), and a header summarizing the total window volume. Built with TypeScript, shadcn/ui tokens, Lucide React icons, motion/react parent entrance with subtle stagger, and Tailwind CSS. Perfect for log ingestion dashboards, observability control planes, incident post-mortem summaries, and application health monitoring pages.
Related Components
React Stats Block API Usage
API endpoint usage table
React Stats Block Service Health Table
Service health monitoring table
React Stats Block Rate Limit Table
Rate limit per endpoint
React Stats Block Job Queue Table
Background job queue table
React Stats Block Live Metrics
Real-time pulsing metrics
React Stats Block Histogram Count Buckets
Bucketed count histogram
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Lollipop Chart Card
A vertical lollipop chart stats card for React and Next.js with thin stem lines topped by circle dots replacing traditional bars, 7-day data points, semantic chart-token coloring, and tabular-nums values built with shadcn/ui and Tailwind CSS