/ docs / install

# Install the widget.

Add CRRT to any React app and start collecting visual feedback in about two minutes.

## 1\. Add the package

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

bash

```
# 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.

tsx

```
import { FeedbackWidget } from '@thedesignproject/crrt'

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

**projectId** scopes feedback to a specific app — get yours from the dashboard after creating a project. **apiBase** defaults to `https://crrt.ai/api`, so you can omit it unless you're self-hosting.

## Props

Prop

Type

Required

Description

`projectId`

`string`

required

The project public key, e.g. `proj_acme_marketing`. Generated by the dashboard.

`apiBase`

`string`

optional

Backend URL. Defaults to `https://crrt.ai/api`. Override when self-hosting.

`theme`

`'light' | 'dark' | 'system'`

optional

Widget appearance. Defaults to `dark`; `system` follows the browser preference.

### 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.

tsx

```
// 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.

tsx

```
// 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.

Nothing happens when you press `C`? Check that the widget actually mounted (it returns `null` during SSR), and that **projectId** matches a project you've created in the dashboard.

[next: hand off feedback to your AI agent →](/docs/agent-handoff)