Prerequisites
- React 18 or 19
- A project with shadcn/ui and Tailwind CSS v4. Run
npx shadcn@latest initfirst if it isn't set up. - Tiptap v3. The CLI installs it for you.
Templates work with shadcn/ui built on either Radix UI or Base UI.
1. Add your license key
Get a lifetime license on the pricing page. After checkout, your license key is emailed to you. Add it to your environment, for example in .env.local:
EDITORCN_PRO_TOKEN=your-license-keyKeep the key out of version control.
2. Add the registries
Add the free editorcn registry and the pro registry to components.json. The pro registry sends your token with each request:
{
"$schema": "https://ui.shadcn.com/schema/registry.json",
"registries": {
"@editorcn": "https://editorcn.vercel.app/r/{name}.json",
"@editorcn-pro": {
"url": "https://pro.rtecn.space/r/{name}.json",
"headers": {
"Authorization": "Bearer ${EDITORCN_PRO_TOKEN}"
}
}
}
}3. Install a template
$ pnpm dlx shadcn@latest add @editorcn-pro/chat-composer
The CLI copies the template into components/templates/chat-composer/, installs the editorcn pieces it depends on (the editor, Static Renderer, extensions), adds any missing shadcn/ui components, and installs the npm packages.
All @tiptap/* packages must be on the same version. The CLI installs the
latest 3.x, so if your project already has older 3.x packages, update them
first (for example npm install @tiptap/react@latest @tiptap/pm@latest @tiptap/starter-kit@latest) to avoid an ERESOLVE peer dependency error.
4. Use it
import { ChatComposer } from "@/components/templates/chat-composer";
export default function Page() {
return <ChatComposer onSend={(content) => sendToYourApi(content)} />;
}Each template page lists its props and shows how to connect it to a backend: