Scrub Sparkline
A KPI with an area sparkline you can scrub; the number, delta and date follow the cursor.
scrub-sparkline.tsxscrub-sparkline.css
Checking access…
Overview
A big headline number with a delta chip, over a smooth or stepped area chart.
Move across the chart (or use arrow keys) and a dot rides the line while the number, delta and date update.
When to use
- Dashboard KPI tiles where the trend matters as much as the number.
When not to use
- Several series at once.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/scrub-sparkline.json$
npx shadcn@latest add https://sundaeui.dev/r/scrub-sparkline.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/scrub-sparkline.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/scrub-sparkline.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy scrub-sparkline.tsx and scrub-sparkline.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { ScrubSparkline } from '@/components/sundae/scrub-sparkline'
<ScrubSparkline label="Monthly revenue" points={values} labels={months} format={(n) => `$${n.toLocaleString()}`} />Props
| Prop | Type | Default |
|---|---|---|
label*KPI name. | string | — |
points*Series values. | number[] | — |
labels*Label per point. | string[] | — |
formatNumber formatter. | (n: number) => string | toLocaleString |
curveLine shape. | 'smooth' | 'step' | 'smooth' |
colorLine colour. | string | '#4ade80' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The chart is role="slider" over the points; aria-valuetext reads "Mar 2026: $48,210".
- Delta direction is shown by symbol and colour, not colour alone.
- Reduced motion removes dot easing.
Customization
- Every colour is a CSS custom property on the root class; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ← / →
- Previous / next point
- Home / End
- First / last point
FAQ
- Is Scrub Sparkline free?
- Scrub Sparkline is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Scrub Sparkline?
- Run npx shadcn@latest add https://sundaeui.dev/r/scrub-sparkline.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Scrub Sparkline support keyboard and screen readers?
- The chart is role="slider" over the points; aria-valuetext reads "Mar 2026: $48,210". Delta direction is shown by symbol and colour, not colour alone.
- Does Scrub Sparkline respect reduced motion?
- Reduced motion removes dot easing.
More like this
All data →Stacked Bars
Data · Refined- Pro
Scatter Plot
Data · Refined Pulse KPI
Data · Understated- Pro
Funnel Chart
Data · Refined - Pro
Histogram
Data · Refined - Pro
Activity Rings
Data · Expressive