Feedback & OverlaysFree

Number Value

A large number with its change beside it: caret up or down, green or red.

Usage

1,2044.2%

bash

npx wunderui-cli add number-value

Writes the source into your project with its dependencies and, on first use, the styles — see Installation.

Then import what you need:

tsx

import { NumberValue } from "@/components/wunderui/number-value"

A number with its change against the last period.

1,2044.2%

The caret says which way it went, the colour whether that is good: a rising cost is red, a falling churn is green.

1,2044.2%

€9803.1%

1.8%0.3%

4128.0%

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

A value with its trend chip inside a stat card.

Conversion rate

3.8% 0.4%

1,204 orders7.7%