Shadcn.io is not affiliated with official shadcn/ui
Stats Pictograph Unit Card
A pictograph unit stats card for React and Next.js with 50 user icons showing active versus inactive users, filled foreground icons for active and outlined muted icons for inactive, NumberFlow animated active count, and percentage summary built with shadcn/ui and Tailwind CSS
Visualize user activity ratios with this pictograph unit stats card for React and Next.js. Features a 10x5 grid of 50 UserIcon glyphs from Lucide React where 35 are filled with text-foreground and 15 are outlined with text-muted-foreground at 30% opacity, a NumberFlow animated active count in the header, a percentage summary, and a compact legend. Built with TypeScript, Lucide React icons, NumberFlow, motion/react parent entrance, and Tailwind CSS. Perfect for user activity dashboards, team availability widgets, seat utilization cards, and enrollment ratio visualizations.
Related Components
React Stats Block Donut Breakdown
Segment distribution donut
React Stats Block KPI Quad Grid
2x2 KPI tile grid
React Stats Block Progress List
Linear goal bars
React Stats Block Hero Metric
Single headline KPI card
React Stats Block Activity Streak
Heatmap activity grid
React Stats Block Goal Grid
Goal target tile grid
FAQ
Was this page helpful?
Sign in to leave feedback.
Period Comparison Card
A period-over-period comparison stats card for React and Next.js with two side-by-side tabular-nums values separated by a large delta callout, NumberFlow on the current value, and a semantic trend header built with shadcn/ui and Tailwind CSS
Pipeline Stage Strip
A horizontal pipeline stats card for React and Next.js with five connected chevron-shaped stages showing deal flow progression, width-proportional stage widths by count, gradient-darkening colors toward final stage, and NumberFlow animated stage values built with shadcn/ui and Tailwind CSS