Peridot Fitness Stats
A high-energy fitness dashboard stats overview with vibrant green aesthetics.
Features
- 6 stat cards — Calories, steps, active minutes, heart rate, workouts, streak
- Sparkline charts — Mini SVG line charts in each card
- Progress ring — Large animated SVG circle showing daily goal completion
- Outfit typeface — Bold geometric sans via Google Fonts
- Color-coded metrics — Each stat has its own accent color
- Dark-first design — Optimized for dark backgrounds with neon accents
Dependencies
@/components/vue-ui/card — Card, CardContent@/components/vue-ui/badge — Badge@/components/vue-ui/separator — Separatorlucide-vue-next — Flame, Footprints, Timer, Heart, Dumbbell, Zap icons
Customization
- Stats data: Edit the stats array with real fitness data
- Progress ring: Change
dailyGoalPercent for different completion states
- Colors: Swap lime greens for other energetic palettes
- Sparklines: Modify
sparkData arrays for different trend shapes
