Observability dashboard for React
KPIs that count up, a live service map, latency chart and events table. Free.
Use it in Next.js
"use client";
import { OrbitDashboard } from "@/components/orbit/OrbitDashboard";
export default function Page() {
return <OrbitDashboard />;
}Install
- One command
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/orbit-dashboard.json - Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.
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.