Dev Design LibraryStat Card Components
Dev Design Library indexes 113 stat card components from 19 open-source UI libraries, with the most coming from Watermelon UI, Tremor Blocks, Amicro Micro Transitions, LocalMode and FLX UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Stat card components belong to the Data display group.
Stat card with trend and overflow menuReUI · ReactStat card with trend and overflow menu
Device Usage ChartAmicro Micro Transitions · React
Dashboard Stat CardLobe 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
Insight CardsSpectrum UI · ReactMetric cards with spark bars, trend deltas, and an AI note.
DashboardBoardUI · React
Billing Usage 01Tremor Blocks · React
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…
Metric cardArc Library · ReactA compact summary for a number that needs context.
Model Evaluator BlockLocalMode · ReactEvaluate a selected classifier over a selected labeled dataset via useEvaluateModel, reporting accuracy plus macro…
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.
Insight Cards PatternHalaska UI · React
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…
Stat CardReactFrame · ReactA dashboard metric card with an animated count-up value, an auto-derived good/bad trend badge, an optional icon and a…
Mono Rounded Kpi Card ChartAmicro Micro Transitions · React
chart-02Intent UI · Reactchart-02
Stat CardsSpectrum UI · ReactKPI cards with a big value, the delta written as a sentence, and a scrubbable sparkline or progress bar beside it…
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…
Adaptive Batch CardLocalMode · ReactSurfaces useAdaptiveBatchSize output: a prominent computed optimal batch number, a hardware summary (cores/RAM/GPU)…
Analytics overviewFLX UI · ReactSidebar, KPI cards, a bar chart, and a recent activity list.
Stat FeatureReactFrame · ReactA metrics section with a concentric ring chart, a trend caption and count-up stats that enter with a blur, slide, fade…
Revenue Line ChartAmicro Micro Transitions · React
chart-03Intent UI · Reactchart-03
Billing Usage 03Tremor Blocks · React
Demostack DashboardWatermelon UI · ReactA responsive product-demo workspace with organization switching, resource discovery, team filtering, and light 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…
Dashboard previewFLX UI · ReactA layered app dashboard with a floating notification.
Server GaugeAmicro Micro Transitions · React
Billing Usage 04Tremor Blocks · React
Gridline DashboardWatermelon UI · ReactA responsive electrical-grid workspace for network modelling, asset flexibility, planning, operations, and stakeholder…
Evaluation Metrics DashboardLocalMode · ReactA composite evaluation dashboard: a KPI/stat-tile row (value + delta), a grid of metric cards (accuracy / precision /…
Analytics overviewFLX UI · ReactWireframe: sidebar, stat cards, chart, and a list.
Storage Usage ChartAmicro Micro Transitions · React
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…
Top Result CardLocalMode · ReactA hero card highlighting the single winning classification result — large label, prominent radial confidence dial (via…
MetricsFLX UI · ReactA stat card with trend and sparkline, layered over a second.
Traffic BubbleAmicro Micro Transitions · React
Billing Usage 06Tremor Blocks · React
Library DashboardWatermelon UI · ReactA responsive library management dashboard with collection metrics, circulation charts, branch switching, and…
Billing Usage 07Tremor Blocks · React
Medesk DashboardWatermelon UI · ReactA healthcare operations dashboard for appointments, staff performance, department load, resources, and patient flow…
Billing Usage 08Tremor Blocks · React
Tallie DashboardWatermelon UI · ReactAn expense audit workspace with live controls, exception tracking, transaction review, and light and dark themes.
Billing Usage 09Tremor Blocks · React
Activities CardWatermelon UI · React
Billing Usage 10Tremor Blocks · React
Bionis DashboardWatermelon UI · React
Kpi Card 01Tremor Blocks · React
Budget CardWatermelon UI · React
Kpi Card 02Tremor Blocks · React
Budget Card BaseWatermelon UI · React
Kpi Card 03Tremor Blocks · React
Business ManagementWatermelon UI · React
Kpi Card 04Tremor Blocks · React
Business Operations DashboardWatermelon UI · React
Kpi Card 05Tremor Blocks · React
Capitalio DashboardWatermelon UI · React
Kpi Card 06Tremor Blocks · React
Credit Usage CardWatermelon UI · React
Kpi Card 07Tremor Blocks · React
Credit Usage Card BaseWatermelon UI · React
Kpi Card 08Tremor Blocks · React
Deployment CardWatermelon UI · React
Kpi Card 09Tremor Blocks · React
Deployment Card BaseWatermelon UI · React
Kpi Card 10Tremor Blocks · React
E Commerce DashboardWatermelon UI · React
Kpi Card 11Tremor Blocks · React
Erp DashboardWatermelon UI · React
Kpi Card 12Tremor Blocks · React
HrmWatermelon UI · React
Kpi Card 13Tremor Blocks · React
Incident ManagementWatermelon UI · React
Kpi Card 14Tremor Blocks · React
Integration CardWatermelon UI · React
Kpi Card 15Tremor Blocks · React
Integration Card BaseWatermelon UI · React
Kpi Card 16Tremor Blocks · React
Invoice Generator DashboardWatermelon UI · React
Kpi Card 17Tremor Blocks · React
Invoice Manager DashboardWatermelon UI · React
Kpi Card 18Tremor Blocks · React
Issue TrackingWatermelon UI · React
Kpi Card 19Tremor Blocks · React
Lead DashboardWatermelon UI · React
Kpi Card 20Tremor Blocks · React
Mail DashboardWatermelon UI · React
Kpi Card 21Tremor Blocks · React
Meetings DashboardWatermelon UI · React
Kpi Card 22Tremor Blocks · React
Payment Operations DashboardWatermelon UI · React
Kpi Card 23Tremor Blocks · React
Portfolio DashboardWatermelon UI · React
Kpi Card 24Tremor Blocks · React
Project Management DashboardWatermelon UI · React
Kpi Card 25Tremor Blocks · React
Run WidgetWatermelon UI · React
Kpi Card 26Tremor Blocks · React
Run Widget BaseWatermelon UI · React
Kpi Card 27Tremor Blocks · React
Sales DashboardWatermelon UI · React
Kpi Card 28Tremor Blocks · React
Task Management DashboardWatermelon UI · React
Kpi Card 29Tremor Blocks · React
Web3 DashboardWatermelon UI · React
Workflow Management DashboardWatermelon UI · React
Libraries with stat card components
Related categories
- Tailwind CSS Stat Card Components
- Animated Stat Card Components
- shadcn/ui Stat Card Components
- Data Display Components
- Card Components
- Chart Components
- Table Components
- Avatar Components
- List Components
- Stat Components
- Calendar Components
- Accordion Components
- Data Table Components
- Carousel Components
- Collapsible Components
- Avatar Group Components
- Bar Chart Components
- Tree View Components
- Card Stack Components