Shadcn.io is not affiliated with official shadcn/ui
Stats Bar Chart Horizontal Card
A horizontal bar chart stats card for React and Next.js with a ChartContainer-wrapped Recharts BarChart in vertical layout, category labels on the YAxis, tabular-nums value list, and var(--chart-1) rounded bars built with shadcn/ui and Tailwind CSS
Rank categorical performance at a glance with this horizontal bar chart stats card for React and Next.js. Features a ChartContainer-wrapped Recharts BarChart with layout='vertical' so bars run left-to-right, a YAxis of category labels on the left, a hidden XAxis for a clean edge, rounded bar caps tinted with var(--chart-1), ChartTooltipContent with a dot indicator, and a total-requests summary in the header. Built with TypeScript, ChartContainer from shadcn/ui, Recharts BarChart, motion/react parent entrance, Lucide React icons, and Tailwind CSS. Perfect for API endpoint leaderboards, campaign performance breakdowns, product-by-revenue rankings, and support ticket volume cards.
Related Components
React Stats Block Bar Chart Vertical Card
Vertical bar chart card
React Stats Block Bar Chart Grouped
Grouped multi-series bars
React Stats Block Bar Chart Stacked
Stacked segment bars
React Stats Block Bar Chart Weekly Breakdown
Weekly volume bars
React Stats Block Leaderboard Score Bars
Ranked list with inline bars
React Stats Block Histogram Distribution
Bucketed distribution card
FAQ
Was this page helpful?
Sign in to leave feedback.
Bar Chart Grouped
A grouped bar chart stats card for React and Next.js with two side-by-side series per category via ChartContainer, dual var(--chart-1) and var(--chart-2) fills, tabular-nums hero totals, and a ChartLegendContent legend built with shadcn/ui and Tailwind CSS
Bar Chart Stacked
A stacked bar chart stats card for React and Next.js with a ChartContainer-wrapped BarChart, three stacked series in var(--chart-1..3), a compact header with hero total, and a dot-pill legend built with shadcn/ui and Tailwind CSS