Component

Statistic

Pairs a label and a figure with an optional trend. A numeric value rolls in digit by digit the first time it scrolls into view, then rolls to each new value, flashing forest or fire in the direction of the change.

Basic

Active users

1,240

Prefix and suffix

Revenue

$12,480

Conversion

4.8%

With trend

Revenue

$12,480

8.2%

Churn

1.8%

4.4%

Animated update

Each digit rolls on its own strip to the new value, and the figure flashes forest when it rises and fire when it falls. Press the button to replay the motion against fresh numbers.

Revenue

$12,480

8.2%

Conversion

4.8%

The markup always holds the final value, server render included, and the figure is read as one accessible name rather than digit by digit
The flash follows the value moving up or down, independent of the trend prop

Dashboard row

Revenue

$12,480

8.2%

Orders

342

8.2%

Refunds

4.4%

The first-view roll runs once per mount, when the figure scrolls into view, and is skipped under prefers-reduced-motion

As cards

Pass card to wrap each statistic in its own bordered surface - a ready-made KPI row.

Revenue

$12,480

8.2%MoM

Active users

48,213

8.2%MoM

Churn

1.8%

4.4%MoM

API reference

Prop	Type	Default	Description
label *	React.ReactNode	None	What the figure measures.
value *	React.ReactNode	None	A number animates with a count-up on first view; any other ReactNode renders statically.
card	boolean	false	Wraps the tile in `Card`'s bordered/shadowed surface. Default false.
decimals	number	0	Decimal places used when animating a numeric value. Defaults to 0. Ignored when `formatValue` is given.
formatValue	((value: number) => string)	None	Custom formatter (currency, compact, units); replaces `locale`/`decimals`. Must return the same string on server and client. Digits still roll; other characters are static cells.
locale	string	"en-US"	BCP 47 locale for numeric separators. Default `"en-US"`: fixed, since server/browser locales can differ ("1,234.5" vs "1.234,5") and fail hydration. Pass the same locale on both to localize.
prefix	React.ReactNode	None	Rendered immediately before the figure - a currency symbol.
suffix	React.ReactNode	None	Rendered immediately after the figure - a unit or a percent sign.
trend	number	None	Positive shows an up arrow in success color, negative a down arrow in danger.
trendLabel	string	None	What the trend is measured against, printed after it ("MoM", "vs last week").

label *None

React.ReactNode

What the figure measures.

value *None

React.ReactNode

A number animates with a count-up on first view; any other ReactNode renders statically.

cardfalse

boolean

Wraps the tile in `Card`'s bordered/shadowed surface. Default false.

decimals0

number

Decimal places used when animating a numeric value. Defaults to 0. Ignored when `formatValue` is given.

formatValueNone

((value: number) => string)

Custom formatter (currency, compact, units); replaces `locale`/`decimals`. Must return the same string on server and client. Digits still roll; other characters are static cells.

locale"en-US"

string

BCP 47 locale for numeric separators. Default `"en-US"`: fixed, since server/browser locales can differ ("1,234.5" vs "1.234,5") and fail hydration. Pass the same locale on both to localize.

prefixNone

React.ReactNode

Rendered immediately before the figure - a currency symbol.

suffixNone

React.ReactNode

Rendered immediately after the figure - a unit or a percent sign.

trendNone

number

Positive shows an up arrow in success color, negative a down arrow in danger.

trendLabelNone

string

What the trend is measured against, printed after it ("MoM", "vs last week").

Also accepts everything from Omit<React.HTMLAttributes<HTMLDivElement>, "prefix">.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent