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
570.3M/30d
Area
570.3M/30d
Bar
570.3M/30d
Time ranges
Three time ranges: last week, last month (default), and last year.
Last week
134.4M/7d
Last month
570.3M/30d
Last year
3609.6M/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
570.3M/30d+1.7%
Area with trend
160.3M/30d+13.5%
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
570.3M/30d
Everything
570.3M/30d+1.7%
Custom sizing
Wide
570.3M/30d
Compact
570.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.