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.
| Asset | Price | 7d | Last 7 days |
|---|---|---|---|
Bitcoin BTC | $67,412.50 | +4.21% | |
Ethereum ETH | $3,284.17 | −1.37% | |
Solana SOL | $148.92 | +7.85% | |
Chainlink LINK | $14.06 | −3.02% | |
XRP XRP | $0.5871 | +0.64% | |
Dogecoin DOGE | $0.1246 | −5.48% |
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.
Bitcoin
BTC
Ethereum
$3,284.17
Solana
$148.92
Chainlink
$14.06
Portfolio value
Unrealised P&L
Fees this month