shadcn/ui gives you buttons, dialogs, inputs, and dozens of other components, but no rich text editor. When you need one for blog posts, comments, notes, or a CMS, you usually end up wiring Tiptap yourself and building a toolbar that matches the rest of your UI.

editorcn is that missing piece. It's a set of Tiptap-based editors installed with the shadcn CLI and styled with your shadcn theme tokens. Like shadcn/ui, the source is copied into your project, so you own the code.

In this guide you'll:

Install the editor with the shadcn CLI

Render a toolbar editor in a Next.js page

Save the content

Render saved content safely with the Static Renderer

Prerequisites

React 18 or 19

A project with shadcn/ui and Tailwind CSS v4 set up. If you don't have one yet, run npx shadcn@latest init .

Tiptap v3. The CLI installs it for you.

Step 1: Add the editorcn registry

editorcn is a shadcn registry .…