Chrome DevTools Stats
A minimalist, monochrome stats dashboard block for developer tools and infrastructure platforms.
Features
- Chrome/metallic aesthetic — Sharp borders, no rounded corners, monochrome palette
- Google Font: JetBrains Mono — Monospace numerals with tabular figures
- 2x2 grid layout — 4 large stat cards separated by 1px borders
- Trend indicators — Percentage change with color-coded up/down trends
- Light/dark mode — Zinc-50 light, pure black dark
- Accessible contrast — All text meets WCAG AA 4.5:1 minimum
Dependencies
@/components/vue-ui/card — Shadcn-Vue Card, CardHeader, CardTitle, CardContent@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/separator — Shadcn-Vue Separatorlucide-vue-next — Rocket, Clock, Globe, Gauge icons
Customization
- Metrics: Replace deployments/uptime/API calls/latency with your own stats
- Colors: Adjust zinc scale for lighter or darker chrome effect
- Font: Swap JetBrains Mono for Geist Mono or Fira Code
