Components
Stat Card
Dashboard KPI metric card with neon corner accents, scan-line hover, large value display, trend arrow with color coding, and an embedded NeonSparkline.
npx neonblade add stat-cardKPI grid — all colors + trends
Total Revenue
$48,290
▲+12.4%vs last month
Active Users
12,834
▲+8.7%vs last week
Bounce Rate
24.7%
▼-3.1%vs yesterday
CPU Load
68%avg
—stable
Without sparklines
Uptime
99.98%
▲+0.02%
Latency
14ms
▼-6ms
Errors
0.03%
▲+0.01%
Glow intensity
none
99.9%
▲+2.1%
low
99.9%
▲+2.1%
medium
99.9%
▲+2.1%
high
99.9%
▲+2.1%
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | number | - | Primary metric value displayed in large text. |
label | string | - | Short label describing the metric (shown above the value). |
unit | string | - | Unit or suffix appended after the value (e.g. '%', 'ms', 'GB'). |
trend | "up" | "down" | "neutral" | - | Trend direction. Renders a colored arrow: green ▲ for up, pink ▼ for down, grey — for neutral. |
change | string | - | Trend change text shown alongside the arrow (e.g. '+12.4%', '-6ms'). |
changeLabel | string | - | Secondary label next to the change text (e.g. 'vs last week'). |
sparkData | NSDataPoint[] | - | Optional sparkline data array. When provided, a NeonSparkline is rendered flush to the card bottom. |
color | "cyan" | "pink" | "green" | string | "cyan" | Neon accent color — applied to border glow, corner accents, value glow, and sparkline. |
icon | ReactNode | - | Icon element displayed in the top-right corner (e.g. a Lucide icon). |
background | string | "rgba(5,5,5,0.85)" | Background color of the card. |
glowIntensity | "none" | "low" | "medium" | "high" | "medium" | Neon glow intensity of the border shadow and corner accents. |
className | string | - | Additional className on the outer card div. |