Shadcn.io is not affiliated with official shadcn/ui
Stats Stacked Percentage Bar Card
A 100% stacked horizontal bar stats card for React and Next.js with a single thick segmented bar showing proportional distribution, chart-token colored flex segments, a legend with percentages, and a dominant-segment header callout built with shadcn/ui and Tailwind CSS
Visualize segment distribution with this stacked percentage bar stats card for React and Next.js. Features a single thick horizontal bar divided into colored flex segments proportional to each category value, chart-token fills from var(--chart-1) through var(--chart-4), inline segment labels for segments wider than 15%, a legend row below with color dots, labels, and tabular-nums percentages, and a header callout identifying the dominant segment. Built with TypeScript, pure CSS flex layout, motion/react parent entrance, and Tailwind CSS. Perfect for traffic source breakdowns, device distribution cards, revenue channel composition, and audience segment visualizations.
Related Components
React Stats Block Donut Breakdown
Segment distribution donut
React Stats Block Donut Pill Legend
Donut with pill legend
React Stats Block Bar Stacked
Stacked segment bars
React Stats Block Progress List
Linear goal bars
React Stats Block Donut Center Total
Donut with center total
React Stats Block KPI Quad Grid
2x2 KPI tile grid
FAQ
Was this page helpful?
Sign in to leave feedback.
Stacked Donut Card
A concentric dual-ring donut stats card for React and Next.js with two stacked Pie components at different radii, outer subcategory ring, inner high-level grouping ring, and a pill legend built with shadcn/ui and Tailwind CSS
Status Matrix Grid
A status matrix grid stats card for React and Next.js with rows of services and columns of time-slot checks, colored square cells for pass fail and warning states, row summary percentages, and semantic status encoding built with shadcn/ui and Tailwind CSS