Shadcn.io is not affiliated with official shadcn/ui
Stats Histogram With Percentile Markers
A latency histogram stats card for React and Next.js with p50/p95/p99 ReferenceLine markers, bucketed BarChart bars, and ChartContainer-wrapped chart body built with shadcn/ui and Tailwind CSS
Visualize response-time distributions at a glance with this histogram stats card for React and Next.js. Features a ChartContainer-wrapped Recharts BarChart with 16 bucketed bars in a neutral muted fill, three vertical ReferenceLine overlays at p50, p95, and p99 with dashed strokes and top-aligned labels, a header with the median value, CartesianGrid horizontal-only lines, and tabular-nums axis ticks. Built with TypeScript, ChartContainer from shadcn/ui, Recharts BarChart plus ReferenceLine, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for API latency monitoring, page load time dashboards, database query performance cards, and SLO observability pages.
Related Components
React Stats Block Histogram Buckets
Bucketed count histogram
React Stats Block Histogram Distribution
Distribution histogram card
React Stats Block Histogram Log Scale
Log-scale histogram
React Stats Block Histogram Stacked
Stacked bin histogram
React Stats Block Line Threshold
Line chart with threshold
React Stats Block Service Health
Service health table
FAQ
Was this page helpful?
Sign in to leave feedback.
Histogram Stacked Bins
A stacked-bin histogram stats card for React and Next.js with bucketed BarChart bars subdivided by stackId into three request-size segments, a 180px fixed chart body, and ChartLegendContent pills built with shadcn/ui and Tailwind CSS
Horizon Chart Grid
A multi-row horizon chart stats card for React and Next.js with layered opacity band encoding per metric, deterministic SVG area rendering for SSR safety, NumberFlow animated aggregate throughput, per-row peak markers, and tabular-nums current values built with shadcn/ui and Tailwind CSS