Skip to content
loopkit

Docs

Getting started

Loopkit components are single React files. You own the code. There is no package to update and no runtime to load.

Requirements

  • React 18 or 19 (Next.js App Router, Vite, Remix all work).
  • Tailwind CSS v4. v3 works too; the class names are the same.
  • framer-motion and a cn() helper (clsx + tailwind-merge), the shadcn standard.

Option 1 · shadcn CLI

If your project has a components.json (run npx shadcn@latest init once), add any component by URL:

bash
npx shadcn@latest add https://loopkitui.com/r/approval-card.json

The CLI writes the file to components/loopkit/, installs framer-motion, and adds the Loopkit colour tokens to your CSS for light and dark.

Option 2 · Copy the file

Open any component in the library, go to the Code tab, copy. Then add the tokens from Theming if they are not there yet.

Use it

tsx
import { ApprovalCard } from "@/components/loopkit/approval-card";

export function MergeGate({ pr }: { pr: PullRequest }) {
  return (
    <ApprovalCard
      agent="coder"
      title={`Merge PR #${pr.number}`}
      risk={pr.touchesBilling ? "high" : "medium"}
      onDecision={(d) => fetch("/api/approve", { method: "POST", body: JSON.stringify({ id: pr.id, d }) })}
    />
  );
}

Every component works with no props (it shows demo data) and takes callbacks for real use, like onDecision, onSend or onResolve.

Next