Install the widget.

1. Add the package

CRRT ships as @thedesignproject/crrt on npm. Pick your package manager — they all work.

# pick your package manager
pnpm add @thedesignproject/crrt
npm install @thedesignproject/crrt
bun add @thedesignproject/crrt
yarn add @thedesignproject/crrt

2. Drop it in your app root

Mount the widget once, alongside your app tree. Reviewers can press C on any page to drop a CRRT on any element.

import { FeedbackWidget } from '@thedesignproject/crrt'

export default function App() {
  return (
    <>
      <YourApp />
      <FeedbackWidget
        projectId="proj_your_app_name"
        apiBase="https://crrt.ai/api"
      />
    </>
  )
}

Props

Match your app theme

Pass your app's current theme directly, or use system to follow prefers-color-scheme. Theme changes apply immediately without remounting the widget.

// Follow theme state owned by your app
<FeedbackWidget projectId="proj_your_app_name" theme={appTheme} />

// Or follow the browser's preferred color scheme
<FeedbackWidget projectId="proj_your_app_name" theme="system" />

Framework notes

Next.js (App Router)

The widget renders client-side. Mount it inside a 'use client' providers component so the rest of your tree can stay server-rendered.

// app/providers.tsx
'use client'

import { FeedbackWidget } from '@thedesignproject/crrt'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <FeedbackWidget projectId="proj_your_app_name" />
    </>
  )
}

Next.js (Pages Router)

Mount inside pages/_app.tsx alongside the page render. No extra configuration needed.

Vite, CRA, Remix, anything else

Mount once in your root component. The widget is SSR-safe: it no-ops during server render and activates on hydration.

Requirements

• React 18 or 19 on the consuming app.
• A modern browser with structuredClone and the Clipboard API (Chrome 76+, Safari 14+, Firefox 94+).
• An apiBase that responds to the public endpoints — covered automatically if you use crrt.ai.

Verify the install

1. Open your app in a browser tab.
2. Press C — a crosshair should activate.
3. Click any element. A pin drops, a popover opens, write a note.
4. Sign into crrt.ai/dashboard and confirm the comment lands on your project.