A dark observability dashboard for a fleet of services. Six KPI cards count up and draw their sparklines, the service map sends packets along its edges, and the latency chart shows p50, p95 and p99 with a crosshair and morphs when you change the range. There are uptime strips, regions on a small globe, cluster capacity rings, a deploy feed with an error budget, and an events table you can filter, search, sort and page through. On a phone the sidebar becomes a drawer and the service map turns vertical. The data is sample data in one file, data.ts, so you swap in your own API there.
- KPI cards with count-up and sparklines
- Service map with moving packets
- p50/p95/p99 latency chart with a crosshair
- Events table: filter, search, sort, pages
- Stack
- React + TypeScript, Tailwind CSS, Framer Motion
- Next.js
- App Router ready, "use client" included
- Also included
- A single HTML file version and PROMPT.md
- Licence
- MIT
Props
- Kpis, ServiceMap, LatencyChart
- use the panels on their own
- EventsTable
- filterable events
- Uptime, Regions, Deploys
- side panels
Questions
Does the dashboard work in Next.js?
Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.
Is the data real?
It's sample data so it runs out of the box. Swap in your metrics.
Is it really free?
Yes. MIT licence, no email needed for the registry install.
Can Cursor or v0 add it for me?
Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.