Animated components for Codex

A status page from the free Orbit dashboard, with the view in the URL

Free pieces also ship as the qodesign-free npm package. Install it, then copy the file below.

import { Suspense } from "react";
import StatusBoard from "./status-board";

// useSearchParams needs a Suspense boundary so the rest of the page can prerender.
export default function StatusPage() {
  return (
    <Suspense>
      <StatusBoard />
    </Suspense>
  );
}

"use client";
import { useRouter, useSearchParams } from "next/navigation";
import OrbitDashboard from "qodesign-free/orbit-dashboard";

export default function StatusBoard() {
  const router = useRouter();
  const view = useSearchParams().get("view") ?? "overview";

  return (
    <main className="min-h-dvh" data-view={view}>
      <OrbitDashboard
        autoplayDemo={false}
        onNavigate={(label) => router.replace(`/status?view=${encodeURIComponent(label.toLowerCase())}`, { scroll: false })}
      />
    </main>
  );
}

onNavigate gets the sidebar label (Overview, Services, Logs and so on), and the snippet copies it into the URL so the rest of your app can read it. Orbit has no prop for the starting view, so a reload opens Overview again. The numbers are Orbit's own demo data; install the source from the registry to wire in your metrics.

Guides with the code and props

• Custom Stripe card form for Next.js
• Polar checkout in Next.js
• Observability dashboard for React
• Supabase login page for Next.js
• Collapsible sidebar for React
• Stacked toast notifications

Paid pieces start at $3 each, or get every one with the Shelf for $29, once.

Comparing libraries for Codex

• qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.
• qodesign vs React BitsReact Bits is best for: text animations, animated backgrounds and creative effects.

All comparisons, with prices read on each library's own site.