Slate DevTools Dashboard
A utilitarian dashboard block for DevOps, infrastructure, and developer tool products.
Features
- 4 metric cards — Each with value, change indicator, and SVG sparkline
- Deployment table — 5-row table with ID, service, environment, status, version, time
- Status indicators — Color-coded dots (success/running/failed)
- Tab navigation — Overview, Deployments, Logs, Alerts tabs
- Monospace typography — JetBrains Mono for technical data
- Sparkline charts — Pure SVG path-based mini charts
- Responsive — Collapses gracefully on mobile
- Dark mode — Deep zinc dark variant
Dependencies
@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/button — Shadcn-Vue Button@/components/vue-ui/card — Shadcn-Vue Card@/components/vue-ui/separator — Shadcn-Vue Separator
Customization
- Metrics: Edit the
metrics array for your KPIs
- Deploys: Modify the
recentDeploys array
- Tabs: Add or remove tabs in the tab bar
- Sparklines: Adjust the data arrays for different chart shapes
