Dev Design LibraryTailwind CSS Stat Components
Dev Design Library indexes 215 Tailwind CSS stat components from 43 open-source UI libraries, with the most coming from Tremor Blocks, Watermelon UI, Shadcn Space, LocalMode and Oxbow 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 styles its components with Tailwind CSS utility classes. Stat components belong to the Data display group.
Showing 120 of 215, a mix from every library. Open a library to see all of its components.
StatdaisyUI · CSS (Tailwind)
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.
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
Stats Fourcnblocks · SvelteFour-column stats with icons
Number TickerAnimations (Svelte) · SvelteAn animated number counter component with spring physics that smoothly animates from a start value to an end value.
Visitor CountObsidianUI · ReactCounter that shows the number of visitors with animated digits.
Stats 01Oxbow UI · Astro
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…
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…
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.
Characters Remaining Countsv-particles · SvelteText input that shows how many characters are still left before the limit.
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.
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…
Comp 103Origin UI · React
Rolling NumberCult UI · ReactNumber component with smooth counting animations and customizable formatting
Device Usage ChartAmicro Micro Transitions · 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
Stats Onecnblocks · SvelteSimple stats row with large numbers
Stats 02Oxbow UI · Astro
Astrix DashboardWatermelon UI · ReactA trade compliance workspace with AI classification metrics, a live pipeline, HS code stream review, and light and…
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.
Outline Like With Countsv-particles · SvelteOutlined like button with a heart and the number of likes next to it.
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…
Comp 114Origin UI · React
Mono Rounded Kpi Card ChartAmicro Micro Transitions · 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
Stats Threecnblocks · SvelteStats cards with descriptions
Stats 03Oxbow UI · Astro
Demostack DashboardWatermelon UI · ReactA responsive product-demo workspace with organization switching, resource discovery, team filtering, and light and…
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.
With Character Countsv-particles · SvelteForm field that shows the number of characters typed out of the maximum.
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
Stats Twocnblocks · SvelteTwo-column stats with side image
Stats 04Oxbow UI · Astro
Gridline DashboardWatermelon UI · ReactA responsive electrical-grid workspace for network modelling, asset flexibility, planning, operations, and stakeholder…
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
Stats 05Oxbow UI · Astro
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
Stats 06Oxbow UI · Astro
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
Stats 07Oxbow UI · Astro
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
Stats 08Oxbow UI · Astro
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 /…
Libraries with Tailwind CSS stat components
Related categories
- Stat Components
- React Stat Components
- Svelte Stat Components
- Animated Stat Components
- shadcn/ui Stat Components
- Tailwind CSS Data Display Components
- Tailwind CSS Card Components
- Tailwind CSS Chart Components
- Tailwind CSS Table Components
- Tailwind CSS Avatar Components
- Tailwind CSS List Components
- Tailwind CSS Calendar Components
- Tailwind CSS Accordion Components
- Tailwind CSS Data Table Components
- Tailwind CSS Carousel Components
- Tailwind CSS Collapsible Components
- Tailwind CSS Avatar Group Components
- Tailwind CSS Stat Card Components
- Tailwind CSS Bar Chart Components
- Tailwind CSS Tree View Components
- Tailwind CSS Card Stack Components