Feedback & OverlaysFree

Trend Chip

A small pill showing a change, up or down, in seven icon styles.

Usage

12.4%2.1%

bash

npm install @wunderui/react

Then import what you need:

tsx

import { TrendChip, TrendChipIcon } from "@wunderui/react"

A rising value.

12.4%

A falling value.

2.1%

Seven ways to draw the direction; the same glyph turns for a falling value.

12.4%12.4%12.4%12.4%12.4%12.4%12.4%

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%