shadcn/ui has its own free dashboard block, dashboard-01: a sidebar, an area chart and a data table. Orbit is a different free dashboard you add with the same CLI: a dark, live ops screen with KPI cards that count up, a service map, a latency chart and an events table. Here is what each one installs and how to wire it to your app.
"use client";
import { useRouter } from "next/navigation";
import { OrbitDashboard } from "@/components/orbit/OrbitDashboard";
export default function DashboardPage() {
const router = useRouter();
return (
<OrbitDashboard
autoplayDemo={false} // no hands-free tour on a real dashboard
onNavigate={(label) => router.push(`/dashboard/${label.toLowerCase()}`)}
/>
);
}npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/orbit-dashboard.jsonAll comparisons, with prices read on each library's own site.
Yes, the dashboard-01 block: npx shadcn add dashboard-01 adds a page with a sidebar, an area chart and a data table, with sample data in data.json.
No. Installed from the shadcn registry, its animations are prefixed orbit-, so Tailwind's animate-ping is left alone. The npm package (qodesign-free 0.1.2) still ships a global ping animation that replaces animate-ping.
No. It is dark only, with its own colors scoped under .orbit.
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.
Yes. MIT licence, no email needed for the registry install.
Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.