Product block

KPI Cards With Deltas

Metric row where each card knows whether a rise is good news, so churn going up is red while revenue going up is green.

114 lineslucide-reactAdded 8 Aug 2026

kpi
stats
metrics
dashboard
trend

What's included

components/dashboard-stat-cards.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add dashboard-stat-cards

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Monthly revenue

$48,290

+12.5%vs last month

Active users

2,847

+8.2%vs last month

Avg. session

4m 32s

-3.1%vs last month

Churn rate

1.8%

-0.4%vs last month

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/dashboard-stat-cards.tsx

/**
 * <DashboardStatCards> — a KPI row with period-over-period deltas.
 *
 * Two things this gets right that hand-rolled versions usually do not:
 *
 *  - Direction is an arrow *and* a colour, and "up" is not assumed to be
 *    good. Churn rising is red while revenue rising is green, so each stat
 *    declares whether an increase is positive via `higherIsBetter`.
 *  - The delta reads "+12.5% vs last month", not a bare "+12.5%". A
 *    percentage with no baseline is the most common lie on a dashboard.
 *
 * Server component — nothing here holds state.
 */

import * as React from 'react'
import { TrendingUp, TrendingDown, Users, DollarSign, Activity, UserMinus } from 'lucide-react'

export interface Stat {
  label: string
  value: string
  /** Signed percentage change, e.g. `-2.4`. */
  delta: number
  /** False for metrics where a rise is bad — churn, latency, cost. */
  higherIsBetter?: boolean
  icon?: React.ReactNode
  /** Baseline the delta is measured against. */
  comparedTo?: string
}

export interface DashboardStatCardsProps {
  stats?: Stat[]
  className?: string
}

const DEFAULT_STATS: Stat[] = [
  {
    label: 'Monthly revenue',
    value: '$48,290',
    delta: 12.5,
    icon: <DollarSign className="h-4 w-4" />,
  },
  {
    label: 'Active users',
    value: '2,847',
    delta: 8.2,
    icon: <Users className="h-4 w-4" />,
  },
  {
    label: 'Avg. session',
    value: '4m 32s',
    delta: -3.1,
    icon: <Activity className="h-4 w-4" />,
  },
  {
    label: 'Churn rate',
    value: '1.8%',
    delta: -0.4,
    higherIsBetter: false,
    icon: <UserMinus className="h-4 w-4" />,
  },
]

export function DashboardStatCards({
  stats = DEFAULT_STATS,
  className = '',
}: DashboardStatCardsProps) {
  return (
    <div className={`grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 ${className}`}>
      {stats.map((stat) => {
        const rising = stat.delta >= 0
        const higherIsBetter = stat.higherIsBetter ?? true
        const good = rising === higherIsBetter

        return (
          <div
            key={stat.label}
            className="rounded-2xl border border-border/60 bg-card/80 p-5 backdrop-blur transition-shadow hover:shadow-md"
          >
            <div className="flex items-center justify-between gap-3">
              <span className="min-w-0 flex-1 truncate text-sm font-medium text-muted-foreground">{stat.label}</span>
              {stat.icon ? (
                <span className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                  {stat.icon}
                </span>
              ) : null}
            </div>

            <div className="mt-3 break-words text-3xl font-extrabold tracking-tight">{stat.value}</div>

            <div className="mt-2 flex items-center gap-1.5 text-xs">
              <span
                className={`inline-flex shrink-0 items-center gap-0.5 font-semibold ${
                  good ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'
                }`}
              >
                {rising ? (
                  <TrendingUp aria-hidden className="h-3.5 w-3.5" />
                ) : (
                  <TrendingDown aria-hidden className="h-3.5 w-3.5" />
                )}
                {rising ? '+' : ''}
                {stat.delta}%
              </span>
              <span className="min-w-0 truncate text-muted-foreground">
                vs {stat.comparedTo ?? 'last month'}
              </span>
            </div>
          </div>
        )
      })}
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/dashboard-stat-cards.tsx and import it where you need the section:

import { DashboardStatCards } from '@/components/dashboard-stat-cards'

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`stats`	`Stat[]`	`DEFAULT_STATS`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

dashboard-stat-cards.html

<!--
  KPI Cards With Deltas — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 ">
  <div class="rounded-2xl border border-border/60 bg-card/80 p-5 backdrop-blur transition-shadow hover:shadow-md">
    <div class="flex items-center justify-between gap-3">
      <span class="min-w-0 flex-1 truncate text-sm font-medium text-muted-foreground">Monthly revenue</span>
      <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dollar-sign h-4 w-4" aria-hidden="true">
          <line x1="12" x2="12" y1="2" y2="22"></line>
          <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
        </svg>
      </span>
    </div>
    <div class="mt-3 break-words text-3xl font-extrabold tracking-tight">$48,290</div>
    <div class="mt-2 flex items-center gap-1.5 text-xs">
      <span class="inline-flex shrink-0 items-center gap-0.5 font-semibold text-emerald-600 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3.5 w-3.5" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>+12.5%</span>
      <span class="min-w-0 truncate text-muted-foreground">vs last month</span>
    </div>
  </div>
  <div class="rounded-2xl border border-border/60 bg-card/80 p-5 backdrop-blur transition-shadow hover:shadow-md">
    <div class="flex items-center justify-between gap-3">
      <span class="min-w-0 flex-1 truncate text-sm font-medium text-muted-foreground">Active users</span>
      <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-4 w-4" aria-hidden="true">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
          <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
          <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
          <circle cx="9" cy="7" r="4"></circle>
        </svg>
      </span>
    </div>
    <div class="mt-3 break-words text-3xl font-extrabold tracking-tight">2,847</div>
    <div class="mt-2 flex items-center gap-1.5 text-xs">
      <span class="inline-flex shrink-0 items-center gap-0.5 font-semibold text-emerald-600 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up h-3.5 w-3.5" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>+8.2%</span>
      <span class="min-w-0 truncate text-muted-foreground">vs last month</span>
    </div>
  </div>
  <div class="rounded-2xl border border-border/60 bg-card/80 p-5 backdrop-blur transition-shadow hover:shadow-md">
    <div class="flex items-center justify-between gap-3">
      <span class="min-w-0 flex-1 truncate text-sm font-medium text-muted-foreground">Avg. session</span>
      <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity h-4 w-4" aria-hidden="true">
          <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path>
        </svg>
      </span>
    </div>
    <div class="mt-3 break-words text-3xl font-extrabold tracking-tight">4m 32s</div>
    <div class="mt-2 flex items-center gap-1.5 text-xs">
      <span class="inline-flex shrink-0 items-center gap-0.5 font-semibold text-red-600 dark:text-red-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-down h-3.5 w-3.5" aria-hidden="true"><path d="M16 17h6v-6"></path><path d="m22 17-8.5-8.5-5 5L2 7"></path></svg>-3.1%</span>
      <span class="min-w-0 truncate text-muted-foreground">vs last month</span>
    </div>
  </div>
  <div class="rounded-2xl border border-border/60 bg-card/80 p-5 backdrop-blur transition-shadow hover:shadow-md">
    <div class="flex items-center justify-between gap-3">
      <span class="min-w-0 flex-1 truncate text-sm font-medium text-muted-foreground">Churn rate</span>
      <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-minus h-4 w-4" aria-hidden="true">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <line x1="22" x2="16" y1="11" y2="11"></line>
        </svg>
      </span>
    </div>
    <div class="mt-3 break-words text-3xl font-extrabold tracking-tight">1.8%</div>
    <div class="mt-2 flex items-center gap-1.5 text-xs">
      <span class="inline-flex shrink-0 items-center gap-0.5 font-semibold text-emerald-600 dark:text-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-down h-3.5 w-3.5" aria-hidden="true"><path d="M16 17h6v-6"></path><path d="m22 17-8.5-8.5-5 5L2 7"></path></svg>-0.4%</span>
      <span class="min-w-0 truncate text-muted-foreground">vs last month</span>
    </div>
  </div>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Dashboard Overview5 blocks

Want the whole screen instead of this one section? Open a page and copy it entire.

8 more blocks in Dashboards

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Dashboards

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Dashboards blocks

View category

Sidebar Dashboard Shell

Sidebar, top bar and scrollable content slot, with a mobile drawer that closes on Escape and marks the active route.

Dashboards218 lines1 dep11 Sept

Activity Feed Panel

Recent-events list with typed icons and relative timestamps that keep the absolute value in a <time> element.

Dashboards171 lines1 dep10 Sept

Page Header With Tabs

Breadcrumb, title, action buttons and a counted tab row that sits flush with the bottom rule.

Dashboards150 lines1 dep10 Sept

Backlog

HighHL-341
Rate-limit the export endpoint
apiinfra
ACAlex ChenAug 19
MediumHL-338
Empty-state illustrations for search
design
DWDana WhitfieldAug 21
LowHL-329
Migrate billing webhooks to v2
billing
RMRosa MartínezAug 25

In progress

HighHL-322
Checkout: support SEPA direct debit
payments
PRPriya Raman#482
MediumHL-318
Rotate staging TLS certificates
Blocked — Waiting on DNS delegation
infra
SOSam OkaforAug 14
MediumHL-325
New onboarding checklist
growth
JWJonas WeberAug 15

In review

HighHL-314
Fix duplicate invoice emails
billing
RMRosa Martínez#479
LowHL-311
Dashboard loading skeletons
design
DWDana Whitfield#476

Done

MediumHL-306
Upgrade CI runners to Node 22
infra
ACAlex ChenAug 11
HighHL-302
Search relevance tuning
search
PRPriya RamanAug 12

Kanban Board Columns

Four columns of prioritised, tagged, assigned task cards with a blocked state — the board as a layout contract, leaving drag behaviour to your own state and library.

Dashboards203 lines1 dep10 Sept

Activity

Today, Aug 13

Alex Chen deployed web@2026.08.13-r2
14:05
Priya Raman changed retention in audit-log config
11:20
- retention_days: 30
+ retention_days: 90
Dana Whitfield commented on Billing migration RFC
09:42

Yesterday

Rosa Martínez invited jonas@acme.dev
16:30
Sam Okafor resolved INC-208: elevated 5xx on api-eu
08:15

Aug 10

Alex Chen rolled back web@2026.08.10-r1
19:47
Priya Raman enabled SSO enforcement
10:05

Audit Log Timeline

Events grouped by day on a vertical rail, icons varying by type and one entry expanded into a detail card — what keeps forty events scannable instead of forty gray dots.

Dashboards204 lines1 dep11 Sept

Support queue

One filter has been added to this view: Enterprise only

All open is shared with your team. Saving changes what everyone sees, including tomorrow's scheduled digest.

Filters in this view

Status is open
Any assignee
Last 30 days
Enterprise only

Narrow it further

Saved View Tabs

Saved views with the third state most implementations drop: a shared view with unsaved edits, where Save changes what a colleague sees tomorrow. Two honest buttons instead of one, ownership on the tab, and dirty said in words.

Dashboards306 lines1 dep2 Sept

Reporting period

Every percentage on this dashboard is measured against the comparison window below.

Compare against

Previous periodThe window immediately before this one.Same period last yearThe same calendar dates, one year back.No comparisonShow absolute numbers with no deltas.

Aug 4 – Aug 31, 2026Jul 7 – Aug 3, 2026

Align to the same weekdays. Off — the comparison is the window immediately before this one, which can land a weekend against weekdays.

Both windows are inclusive of their end dates and computed in UTC, so a change of clocks never produces a week of six days and 23 hours.

Comparison Period Picker

A reporting window with the comparison window spelled out beside it — resolved dates, UTC arithmetic, and an option to align weekdays so a weekend is never compared against a Tuesday.

Dashboards315 lines1 dep

Alert rules

4 of 5 active · 1 delivering nowhere

critical
API error rate
Alert when API error rate stays above 2% for 5 minutes.
#incidentsFired 3 times in the last 30 days
warning
p95 latency
Alert when p95 latency stays above 800ms for 15 minutes.
#platform-alertsFired 27 times in the last 30 days
This rule is on, but #platform-alerts is muted — nothing has been delivered since it was muted.
warning
Signups per hour
Alert when Signups per hour stays below 4 for 1 hour.
growth@acme.comFired 142 times in the last 30 days
Firing 142 times a month is usually a threshold problem rather than an incident. Consider raising it before muting the channel.
critical
Job queue depth
Alert when Job queue depth stays above 5,000 for 10 minutes.
pagerduty.com/…/v2Fired 1 times in the last 30 days
info
Storage used
Alert when Storage used stays above 85% for 1 day.
ops@acme.comFired 0 times in the last 30 days

Alert Rule List

Threshold alerts with the two facts most rule lists omit: how often each has fired, and whether its channel is muted — so a rule that is on but delivering nowhere reads as its own state.

Dashboards282 lines1 dep11 Sept