Tailwind CSS Stat Card Components

Dev Design Library indexes 108 Tailwind CSS stat card components from 14 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. Every library in this list styles its components with Tailwind CSS utility classes. 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
• 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…
• Model Evaluator BlockLocalMode · ReactEvaluate a selected classifier over a selected labeled dataset via useEvaluateModel, reporting accuracy plus macro…
• StatFLX UI · ReactKPI value with an icon and a tinted trend badge.
• 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 Tailwind CSS stat card components

• Watermelon UI
• Tremor Blocks
• Amicro Micro Transitions
• LocalMode
• FLX UI

Related categories

• Stat Card Components
• Animated Stat Card Components
• shadcn/ui Stat Card Components
• Tailwind CSS Data Display Components
• Tailwind CSS Card Components
• Tailwind CSS Chart Components
• Tailwind CSS Table Components
• Tailwind CSS Avatar Components
• Tailwind CSS Stat 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 Bar Chart Components
• Tailwind CSS Tree View Components
• Tailwind CSS Card Stack Components