Price History
A price chart with low and high markers, a draggable alert line, range tabs and a verdict on whether now is good.
price-history.tsxprice-history.css
Checking access…
Overview
The line shows price over time with the lowest and highest points labelled. Drag the dashed alert line to set a target; the alert summary updates.
The verdict compares today to the range (“Near its low”) so the chart answers the real question at a glance.
When to use
- Shopping, travel fares, price trackers.
When not to use
- Fast-moving markets: use a trading chart.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/price-history.json$
npx shadcn@latest add https://sundaeui.dev/r/price-history.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/price-history.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/price-history.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 price-history.tsx and price-history.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 { PriceHistory } from '@/components/sundae/price-history'
<PriceHistory />Props
| Prop | Type | Default |
|---|---|---|
points*Daily prices, oldest first. | number[] | — |
currencyCurrency. | string | 'USD' |
onAlertAlert set. | (target: number) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The chart has a text summary of low, high and current price.
- The alert handle is a slider with the target price in aria-valuetext.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-prh; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ↑ / ↓ on the alert
- Move target by 1
FAQ
- Is Price History free?
- Price History is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Price History?
- Run npx shadcn@latest add https://sundaeui.dev/r/price-history.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Price History support keyboard and screen readers?
- The chart has a text summary of low, high and current price. The alert handle is a slider with the target price in aria-valuetext.
- Does Price History respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →- Pro
Range Line Chart
Data · Refined Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Tick Gauge
Data · Refined - Pro
Donut Breakdown
Data · Refined Invoice List
Data · Refined