Electric AI Stats
A cyberpunk-inspired stats dashboard designed for AI and machine learning platforms.
Features
- Four stat cards — Model accuracy, inference speed, GPU utilization, and throughput
- SVG sparkline charts — Mini trend lines with gradient fills and pulsing endpoints
- Central status indicator — Brain icon with animated concentric pulse rings
- Model metrics — Training loss, validation F1, and token efficiency with progress bars
- Neon glow effects — Cards emit colored glow on hover in dark mode
- JetBrains Mono + Sora — Monospace data with modern sans text
- Light/dark mode — Full WCAG AA contrast with neon accents in dark, clean grays in light
Dependencies
lucide-vue-next — Brain, Cpu, Zap, TrendingUp, Activity, BarChart3 icons
@/components/vue-ui/card — Shadcn-Vue Card components
@/components/vue-ui/badge — Shadcn-Vue Badge
@/components/vue-ui/separator — Shadcn-Vue Separator
@/components/vue-ui/progress — Shadcn-Vue Progress
Customization
- Stats: Modify the
stats array with your own KPIs and sparkline data
- Model metrics: Update training/validation targets in the
modelMetrics array
- Colors: Change neon cyan/purple accents via the
color property on each stat
- Central indicator: Swap the model name and version for your deployment