Dev Design LibraryReact Stat Components
Dev Design Library indexes 212 React stat components from 45 open-source UI libraries, with the most coming from Tremor Blocks, Watermelon UI, Shadcn Space, LocalMode and Origin UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. Stat components belong to the Data display group.
Showing 120 of 212, a mix from every library. Open a library to see all of its components.
Code SlotsReact Bits · ReactOne-time-code input where a hidden overlay input owns focus, paste and SMS autofill while each slot lands its digit on…
StatChakra UI · ReactUsed to display a statistic with a title and value.
Number TickerMagic UI · ReactAnimate numbers to count up or down to a target number
Notification BadgeReact Spectrum · ReactNotification badges are used to indicate new or pending activity .
Comp 102Origin UI · React
Animated NumberCult UI · ReactNumber component with smooth counting animations and customizable formatting
Stat card with trend and overflow menuReUI · ReactStat card with trend and overflow menu
Vertical Wheel CounterAmicro Micro Transitions · ReactVertical cylinder tumbler wheel number scroll with stepper buttons.
StatisticLobe UI · React
Metric CardKokonut UI · ReactA revenue KPI card. Scrub a day, drag a range, or pick a segment; the number rolls, the line morphs and the breakdown…
chart-01Intent UI · Reactchart-01
Digit SwapbeUI · ReactFixed-slot digits and mask glyphs that roll on change with controllable direction, stagger, replay, and suffix emphasis.
Animated CounterRare UI · ReactA number that counts to its new value on a wheel of digits, like an odometer.
Insight CardsSpectrum UI · ReactMetric cards with spark bars, trend deltas, and an AI note.
Stats CounterVengeance UI · ReactCount-up number animation triggered on scroll
Stats SectionLaunch UI · React
KpiPanel UI · React NativeOne number, what it is doing, and the shape it made getting there.
About Us 01 - Impact MetricsShadcn Space · ReactA bold about us section combining value pillars, headline messaging, and performance counters, perfect for agencies or…
Flip Clock CounterPixel Perfect · ReactA split-flap clock digit that folds down every tick like a mechanical departure board.
DashboardBoardUI · React
Split Flap DisplayComponentry · ReactA premium split-flap display component inspired by vintage departure boards.
Billing Usage 01Tremor Blocks · React
Visitor CountObsidianUI · ReactCounter that shows the number of visitors with animated digits.
dB Readoutaudiocn · ReactA numeric level label that updates at a readable rate, with a reserved width so the layout never shifts.
TimerShark UI · ReactCountdown or stopwatch with controls.
Expandable Data CardSona UI · React
Agndex DashboardWatermelon UI · ReactA developer portal for managing search indexes, API credentials, billing, and project settings with light and dark…
Animated counterArc Library · ReactGive changing totals a clear sense of movement.
Badge CounterUI Lab · ReactRolls its digits the way the count moved and bumps each time it changes.
Number flowHextaUI · ReactAnimated numbers where only the changed digits spin, with any Intl format and locale.
Model Evaluator BlockLocalMode · ReactEvaluate a selected classifier over a selected labeled dataset via useEvaluateModel, reporting accuracy plus macro…
Animated numberCojeev UI · ReactA smooth, interruptible number transition for totals, metrics and small moments of progress.
Count Up NumberMicroKit · ReactA stat that counts up from zero the first time it scrolls into view, easing out so the last digits settle slowly; it…
Traffic CardROI UI · ReactA website traffic card component with line chart and statistics.
StatFLX UI · ReactKPI value with an icon and a tinted trend badge.
Globe split heroVelora UI · ReactSplit hero with copy, CTAs and live stats beside an interactive dotted globe with arcs.
Insight Cards PatternHalaska UI · React
Fluid CountdownSpaceUI · ReactA countdown timer with fluid rolling digits, play/pause and reset controls, and auto-loop built with NumberFlow and…
Number FlowSora UI · ReactAn animated, digit-by-digit number counter with a smooth rolling odometer effect, powered by Motion.
Piggy BankZAYX · React Native
Dashboard 01D2Studio UI · ReactHotel booking dashboard with guest and vacancy stats, booking search and a check-in and check-out table.
Insight CardEaseUI · ReactA stat tile: a label, a headline value, and an optional trend pill. Pass a Number Ticker as the value to have it roll…
Glass StepperOpaline · ReactCapsule stepper with rolling digits, hold-to-accelerate and a shake at the limits.
CountFibo · ReactA number at a glance: capped at 99+, shortened to 1.2K or signed as +4, read out in full.
Countdown TimerReactFrame · ReactA countdown timer that counts down to a duration or an absolute end date, with flip-cell digit transitions, a compact…
Count UpReact Bits · ReactAnimated number counter supporting formatting and decimals.
Comp 103Origin UI · React
Rolling NumberCult UI · ReactNumber component with smooth counting animations and customizable formatting
Device Usage ChartAmicro Micro Transitions · React
Dashboard Metric StripLobe UI · React
chart-02Intent UI · Reactchart-02
Animated NumberbeUI · React
Number TickerSpectrum UI · ReactA rolling digit ticker that counts to a value with per-digit stagger, padding and blur.
Animated NumberVengeance UI · React
Web KpiPanel UI · React Native
Avatar-05 - CounterShadcn Space · ReactCounter avatar component
Milestone OdometerPixel Perfect · ReactMilestone Odometer component.
Billing Usage 02Tremor Blocks · React
Astrix DashboardWatermelon UI · ReactA trade compliance workspace with AI classification metrics, a live pipeline, HS code stream review, and light and…
Metric cardArc Library · ReactA compact summary for a number that needs context.
OdometerUI Lab · ReactRolls forward like a mechanical counter and wraps from 999 back to 000.
Char Limit IndicatorLocalMode · ReactA radial progress ring + n/MAX monospace counter that turns error-colored when over the limit, deriving the percentage…
Analytics overviewFLX UI · ReactSidebar, KPI cards, a bar chart, and a recent activity list.
Number TickerVelora UI · ReactSprings a number up when it enters the viewport.
StatHalaska UI · React
Number TickerEaseUI · ReactNumber that rolls to a new value like an odometer, one changed digit at a time.
Stat CardReactFrame · ReactA dashboard metric card with an animated count-up value, an auto-derived good/bad trend badge, an optional icon and a…
CounterReact Bits · ReactFlexible animated counter supporting increments + easing.
Comp 114Origin UI · React
Mono Rounded Kpi Card ChartAmicro Micro Transitions · React
Dashboard Stat CardLobe UI · React
chart-03Intent UI · Reactchart-03
Number TickerbeUI · React
Stat CardsSpectrum UI · ReactKPI cards with a big value, the delta written as a sentence, and a scrubbable sparkline or progress bar beside it…
Web Rolling NumberPanel UI · React Native
Input-06 - Input with character counterShadcn Space · ReactInput component
Billing Usage 03Tremor Blocks · React
Demostack DashboardWatermelon UI · ReactA responsive product-demo workspace with organization switching, resource discovery, team filtering, and light and…
Slot textArc Library · ReactText and numbers that spin into their new value on staggered slot machine reels.
Stat CounterUI Lab · ReactNumbers count up to their value; scrub a sparkline and the figure rolls back through its history.
Adaptive Batch CardLocalMode · ReactSurfaces useAdaptiveBatchSize output: a prominent computed optimal batch number, a hardware summary (cores/RAM/GPU)…
Stat rowsFLX UI · ReactStacked KPI rows with label, value, and trend delta.
Stat FeatureReactFrame · ReactA metrics section with a concentric ring chart, a trend caption and count-up stats that enter with a blur, slide, fade…
Comp 117Origin UI · React
Revenue Line ChartAmicro Micro Transitions · React
Web StatPanel UI · React Native
Number Ticker-01 - BasicShadcn Space · ReactNumber Ticker component
Billing Usage 04Tremor Blocks · React
Gridline DashboardWatermelon UI · ReactA responsive electrical-grid workspace for network modelling, asset flexibility, planning, operations, and stakeholder…
Stats bandArc Library · ReactHeadline numbers that count up in view, each with a tiny visual that proves it and a context line on hover, plain or…
Tally CounterUI Lab · ReactCounts in hand-drawn tally marks, one pen stroke at a time.
Storage MeterLocalMode · ReactShows origin/IndexedDB storage usage against quota as a meter, with a warning state past a configurable threshold and…
Dashboard previewFLX UI · ReactA layered app dashboard with a floating notification.
Comp 118Origin UI · React
Server GaugeAmicro Micro Transitions · React
Number Ticker-02 - Currency CounterShadcn Space · ReactA specialized animated counter for currency and financial data. Ideal for showing bank balances, product prices, or…
Billing Usage 05Tremor Blocks · React
Jobtracker DashboardWatermelon UI · ReactA responsive job management workspace with customer records, job pipelines, estimates, drag-and-drop line items, and…
Vector Storage ObservabilityLocalMode · ReactVectorDB observability complementing StorageMeter (quota): a compression-stats badge (SQ8 ratio + before/after size…
Analytics overviewFLX UI · ReactWireframe: sidebar, stat cards, chart, and a list.
Comp 416Origin UI · React
Storage Usage ChartAmicro Micro Transitions · React
Number Ticker-03 - Countdown CounterShadcn Space · ReactAn animated time and chronometer counter formatted as HH:MM:SS. Perfect for session timers, countdowns, workout…
Billing Usage 06Tremor Blocks · React
Library DashboardWatermelon UI · ReactA responsive library management dashboard with collection metrics, circulation charts, branch switching, and…
Cosine Similarity MeterLocalMode · ReactA display card showing a cosine similarity (0–1) as a large numeric value with a human-readable bucket label (Very…
MetricsFLX UI · ReactA stat card with trend and sparkline, layered over a second.
Comp 418Origin UI · React
Traffic BubbleAmicro Micro Transitions · React
Number Ticker-04 - Growth Metrics CounterShadcn Space · ReactA percentage-based growth counter that indicates trends with color shifting and icons. Best for stock trends…
Billing Usage 07Tremor Blocks · React
Medesk DashboardWatermelon UI · ReactA healthcare operations dashboard for appointments, staff performance, department load, resources, and patient flow…
Entity Stats BarLocalMode · ReactA horizontal stats bar showing the total detected-entity count plus per-type breakdown badges (PER / LOC / ORG / MISC…
Comp 92Origin UI · React
Number Ticker-05 - Real-Time Metrics CounterShadcn Space · ReactA high-fidelity statistics counter for displaying large numbers clearly. Designed for user counts, page views, or…
Billing Usage 08Tremor Blocks · React
Tallie DashboardWatermelon UI · ReactAn expense audit workspace with live controls, exception tracking, transaction review, and light and dark themes.
Evaluation Metrics DashboardLocalMode · ReactA composite evaluation dashboard: a KPI/stat-tile row (value + delta), a grid of metric cards (accuracy / precision /…
Number Ticker 06 - Social ProofShadcn Space · ReactA social proof counter with a counting member number and a stacked avatar cluster, perfect for signup counts…
Billing Usage 09Tremor Blocks · React
Libraries with React stat components
Related categories
- Stat Components
- Tailwind CSS Stat Components
- Svelte Stat Components
- Animated Stat Components
- shadcn/ui Stat Components
- React Data Display Components
- React Card Components
- React Chart Components
- React Table Components
- React Avatar Components
- React List Components
- React Calendar Components
- React Accordion Components
- React Carousel Components
- React Collapsible Components
- React Data Table Components
- React Avatar Group Components
- React Tree View Components
- React Card Stack Components
- React Line Chart Components
- React Counter Components