Stat Card

The number counts up, the sparkline draws left to right, and change is marked by arrow and sign, not colour alone.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add stat-card

Example

import { StatCard } from "@/components/galactrex/stat-card";

<StatCard label="Downloads" value={48210} change={12.4} trend={[3, 5, 4, 8, 9]} />

Installs to components/galactrex/stat-card.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`label`	`string`	—	Metric.
`value`	`number`	—	Value.
`format / locale`	`Intl options`	—	Formatting.
`change`	`number`	—	Percent change.
`trend`	`number[]`	—	Sparkline values.
`period`	`string`	—	Comparison period.
`className`	`string`	—	Extra classes for the outer element.