Shadcn.io is not affiliated with official shadcn/ui
Stats 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
Show daily trends with lighter visual weight using this vertical lollipop chart stats card for React and Next.js. Features seven vertical stems rendered as thin lines topped by circle dots at the data point value, day-of-week labels below, NumberFlow animated total in the header, and proportional stem heights derived from the max value. Built with TypeScript, pure CSS positioned elements, NumberFlow, motion/react parent entrance with useReducedMotion, and Tailwind CSS. Perfect for daily activity dashboards, engagement overview widgets, simple trend visualizations, and minimal data displays.
Related Components
React Stats Block Bar Vertical
Vertical bar chart card
React Stats Block Bar Weekly
Weekly breakdown bars
React Stats Block Sparkline
Sparkline card grid
React Stats Block Hero Sparkline
Hero metric with sparkline
React Stats Block Progress List
Linear progress bars
React Stats Block Histogram
Bucket distribution histogram
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Metric Card Tabbed
A tabbed metric stats card for React and Next.js with four switchable metrics, inline tab navigation with border-b-2 active indicator, NumberFlow animated value transitions, per-metric sparkline, and semantic delta indicators built with shadcn/ui and Tailwind CSS