STAT CARD

Metric tile for dashboards. Displays a primary value, contextual label, optional delta trend indicator, and a sublabel status line.

PREVIEW

REACTOR OUTPUT

94.7%

▲ +2.3%

NOMINAL

HULL INTEGRITY

61%

▼ -8.1%

DEGRADED

CREW MANIFEST

312

ALL ABOARD

CORE TEMP

4820°K

▼ +320°K

CRITICAL

INSTALLATION

BASH

npx shadcn@latest add @scificn/stat-card

USAGE

TSX

import { StatCard } from '@/ui/stat-card'

export function DashboardMetrics() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1rem' }}>
      <StatCard
        label="REACTOR OUTPUT"
        value="94.7%"
        delta="+2.3%"
        deltaPositive
        sublabel="NOMINAL"
        variant="ACTIVE"
      />
      <StatCard
        label="HULL INTEGRITY"
        value="61%"
        delta="-8.1%"
        deltaPositive={false}
        sublabel="DEGRADED"
        variant="WARNING"
      />
    </div>
  )
}

VARIANTS

POWER LEVEL

88%

▲ +4%

DEFAULT

variant="DEFAULT"

POWER LEVEL

88%

▲ +4%

ACTIVE

variant="ACTIVE"

POWER LEVEL

88%

▲ +4%

WARNING

variant="WARNING"

POWER LEVEL

88%

▲ +4%

CRITICAL

variant="CRITICAL"

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
label	string	—	Small uppercase label above the value.
value	string \| number	—	Primary metric displayed large.
delta	string	undefined	Change indicator text, e.g. "+2.3%".
deltaPositive	boolean	undefined	true = green ▲, false = red ▼, undefined = neutral —.
sublabel	string	undefined	Footer status line at the bottom of the card.
variant	DEFAULT \| ACTIVE \| WARNING \| CRITICAL	DEFAULT	Controls the border and value accent color.
className	string	—	Additional classes merged via cn().