Stop Rebuilding UI
Previous: Period Comparison Card
Next: Pipeline Stage Strip

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

Scroll to load preview

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.

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

Last updated on April 12, 2026

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