Components
Neon Sparkline
Inline mini sparkline for embedding in KPI cards and stat widgets. Neon glow stroke, gradient fill, and a minimal tooltip.
npx neonblade add neon-sparklineColor variants
cyan
pink
green
Sizes
60px
100px
160px
220px
Glow intensity
none
low
medium
high
Curve types
monotone
linear
step
In-context — KPI card usage
Revenue
$48,290
▲ 12.4%
Bounce Rate
24.7%
▼ 3.1%
Throughput
9.2k/s
▲ 8.6%
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
data | NSDataPoint[] | - | Array of data points. Each must have a value number (or use dataKey). |
dataKey | string | "value" | Key to read from each data point. |
color | "cyan" | "pink" | "green" | string | "cyan" | Neon color preset or any CSS hex color. |
width | number | string | 120 | Width of the sparkline in px (or '100%' for responsive). |
height | number | 40 | Height of the sparkline in px. |
strokeWidth | number | 1.5 | Line stroke width in px. |
glowIntensity | "none" | "low" | "medium" | "high" | "medium" | Neon drop-shadow glow intensity on the line. |
area | boolean | true | Show a gradient-filled area under the line. |
curve | "monotone" | "linear" | "step" | "monotone" | Line interpolation type. |
tooltip | boolean | true | Show a minimal cyberpunk tooltip on hover. |
className | string | - | Additional className on the outer wrapper span. |