Download Sparkline
Tiny inline SVG sparkline showing npm download trends over time.
Loading...
Installation
$ shadcn add @jalco/download-sparklineUsage
import { DownloadSparkline } from "@/components/download-sparkline"<DownloadSparkline package="react" />Async server component — fetches daily download data from the npm API at build time, cached 1 hour via ISR. Pure SVG, zero charting dependencies.
Variants
Chart types
Three chart types: line (default), area, and bar.
Line
648.3M/30d
Area
648.3M/30d
Bar
648.3M/30d
Time ranges
Three time ranges: last week, last month (default), and last year.
Last week
162.7M/7d
Last month
648.3M/30d
Last year
4372.5M/1y
Examples
With trend indicator
Shows percentage change comparing the first half vs second half of the time range, with a colored arrow.
Trend + label
648.3M/30d+5.0%
Area with trend
188.7M/30d+16.8%
With baseline and date range
Baseline shows a faint dashed line at the average. Date range labels the time period below the chart.
Baseline + dates
648.3M/30d
Everything
648.3M/30d+5.0%
Custom sizing
Wide
648.3M/30d
Compact
648.3M/30d
API Reference
DownloadSparkline
PropType
Notes
- ISR caching. Download data is cached for 1 hour via
next.revalidate. No API key required. - Pure SVG. Zero charting library dependencies. The sparkline is rendered as a single inline SVG element.
- Trend calculation. The trend percentage compares the average daily downloads in the first half of the range to the second half. Green arrow = increasing, red arrow = decreasing.
- Pre-fetched data. Pass the
dataprop to skip the API call — useful for static builds or when fetching data separately. - Scoped packages. Supports scoped names like
@tanstack/react-query.