Sparkline
A tiny trend line without axes — green when it rises, red when it falls — for table cells, price cards and metric tiles.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import { Sparkline, SparklineProps } from "@wunderui/react"Examples
Line
Trend=up and Trend=down: green when the series ends at or above where it started, red when below. `trend="auto"` (the default) decides from the data.
Area
Style=area: the same line with a soft gradient fill under it. The fill fades in after the line has drawn.
Sizes
96 × 32 is the Figma size; any width and height work, and `width="100%"` fills the parent and follows it when it resizes.
In a table
The “Last 7 days” column of a market table: one sparkline per row, coloured by the week’s direction, with an aria-label that says what it shows.
Loading
`loading` shows a skeleton of the same size, so the row does not jump when the data arrives.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Asset card and metric tiles
A full-width area sparkline under the price of an asset, and small ones beside the numbers of three metric tiles.