Shadcn.io is not affiliated with official shadcn/ui
Stats Histogram Distribution Card
A histogram distribution stats card for React and Next.js with a ChartContainer-wrapped Recharts BarChart of ten bucketed bars across the X axis, a muted var(--chart-2) fill, a tight 160px chart body, and a mean summary header built with shadcn/ui and Tailwind CSS
Visualize the shape of a distribution with this histogram stats card for React and Next.js. Features a ChartContainer-wrapped Recharts BarChart with ten latency buckets across the X axis, rounded-top bars filled with var(--chart-2), a compact h-[160px] chart body, a CartesianGrid limited to horizontal dashed lines, ChartTooltipContent for per-bucket counts, and a header displaying sample size and median latency. Built with TypeScript, ChartContainer from shadcn/ui, Recharts BarChart, motion/react parent entrance, and Tailwind CSS. Perfect for API latency dashboards, response time percentile panels, test-score distribution views, and product usage histograms.
Related Components
React Stats Block Histogram Count Buckets
Bucketed count histogram
React Stats Block Histogram Log Scale
Log-scale histogram
React Stats Block Histogram Stacked Bins
Stacked bin histogram
React Stats Block Histogram With Percentile Markers
Percentile marker histogram
React Stats Block Latency Distribution
Latency distribution card
React Stats Block Bar Chart Vertical Card
Vertical bar chart card
FAQ
Was this page helpful?
Sign in to leave feedback.
Histogram Count Buckets
A bucketed histogram stats card for React and Next.js with a ChartContainer-wrapped Recharts BarChart rendering counts across fixed numeric buckets, rounded bar caps, and a tabular-nums bucket summary built with shadcn/ui and Tailwind CSS
Histogram Log Scale
A log-scale histogram stats card for React and Next.js with a ChartContainer-wrapped Recharts BarChart using YAxis scale='log' to visualize wide dynamic range distributions built with shadcn/ui and Tailwind CSS