Stat Card

Installation

$ npx shadcn@latest add https://goodui.dev/r/stat-card.json

The file lands in components/goodui/stat-card.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/stat-card works too.

Usage

import { CalendarCheck, DollarSign, UserX } from "lucide-react"
import { StatCard } from "@/components/goodui/stat-card"

export function DashboardStats() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <StatCard
        label="Revenue"
        value={48210}
        format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
        delta={12.4}
        deltaLabel="vs last month"
        data={[31, 34, 33, 38, 41, 39, 45, 48]}
        icon={<DollarSign />}
      />
      <StatCard label="Bookings" value={1284} delta={4.1} data={[38, 42, 40, 51, 47, 55, 61]} chart="bars" icon={<CalendarCheck />} tone="info" />
      <StatCard label="No-show rate" value={3.2} suffix="%" delta={-0.8} invertDelta deltaSuffix=" pts" icon={<UserX />} tone="warning" footer="Deposits enabled since Oct 4" />
    </div>
  )
}

When to use

Examples

<StatCard label="Revenue" value={data?.revenue ?? 0} loading={isLoading} data={data?.trend} />

<StatCard label="Page views" value={views} compact numberFlow variant="soft" tone="success" />

<a href="/reports/revenue" className="block rounded-xl outline-none focus-visible:ring-3 focus-visible:ring-ring/50">
  <StatCard label="Revenue" value={48210} prefix="$" interactive />
</a>

API reference

Accessibility

• •The counting number is aria-hidden; screen readers read the final formatted value from a visually hidden copy, once. With numberFlow, NumberFlow handles its own screen-reader text.
• •The delta adds visually hidden "increase", "decrease" or "no change" after the number, so the trend does not rely on the arrow or color. Translate with labels.
• •The sparkline and its end dot are aria-hidden; describe the trend in deltaLabel or footer if it matters.
• •loading sets aria-busy on the card.
• •interactive only adds a hover lift; the card is a <div>, so wrap it in a link or button for keyboard access.

Motion

• •count: when 30% of the card is in view, the value counts up from 0 over 1.2 s with an ease-out curve; later value changes tween from the current number.
• •draw: the line draws in over 1.1 s, the area fades in, then the end dot pops in at 1.1 s; bars grow from the bottom, 40 ms apart. full (default) does count and draw together.
• •numberFlow: digits roll to the new value on every change instead of tweening.
• •interactive: the card lifts 2px in 200 ms on hover (neo cards grow their offset shadow). The loading skeleton shimmers every 1.4 s.
• •Reduced motion: the value shows the final number at once, the chart is drawn, the skeleton is static and the hover lift does not animate.

• •One IntersectionObserver per card, disconnected after the first reveal. The count-up uses requestAnimationFrame for 1.2 s; the sparkline is measured with a ResizeObserver and redrawn only when its size changes.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related