Installation

Install the notion-like editor into a Next.js or Vite project with one shadcn command, and see the files, packages and CSS it adds.

Install with shadcn

Run the add command in the project that will host the editor. It is the same command in a Next.js and in a Vite project.

$ bunx --bun shadcn@latest add https://www.huanngdev.site/r/notion-like-editor.json

Tested with shadcn 4.21.4 on Next.js and Vite, on Tailwind v4. Read the notes below before you answer the prompts.

Install by name

Register the registry once in components.json, then install with a short name. Nothing else changes: the same files arrive either way.

json

{
  "registries": {
    "@huanngdev": "https://www.huanngdev.site/r/{name}.json"
  }
}

$ bunx --bun shadcn@latest add @huanngdev/notion-like-editor

What it installs

256 files under components/blocks/notion-like-editor/. This is the editor itself, including its document schema, plugins, elements and static renderer.
4 shared helper files under components/huanngdev/notion-like-editor/. Another block can need these too, so shadcn keeps them out of the block's own folder.
19 npm packages: @dnd-kit/core, @platejs/basic-nodes, @platejs/basic-styles, @platejs/callout, @platejs/code-block, @platejs/indent, @platejs/layout, @platejs/link, @platejs/list, @platejs/mention, @platejs/table, @platejs/toc, @vidstack/react, highlight.js, katex, lowlight, lucide-react, platejs, zod.
20 shadcn components it depends on, installed from your own registry: alert, button, calendar, checkbox, command, dialog, dropdown-menu, input, kbd, popover, progress, scroll-area, separator, skeleton, spinner, table, tabs, textarea, toggle, tooltip.
2 other registry items: audio-player, video-player. The audio and video players are separate because they can be used on their own.
15 CSS rules added to your global stylesheet.

shadcn asks before it replaces a file you already have, for example components/ui/button.tsx. Answer N. Your file is kept and the rest of the install continues; the editor works against whatever shape your local primitives already have.

Do not pass --yes to skip the prompts unless you mean to overwrite. It replaces your local primitives with the registry's versions, and any change you made to them is gone.

Radix only

This block renders the Radix component APIs. It installs and compiles in a shadcn project set up with Radix primitives. A project on the Base UI style does not compile without changes, because the same components are rendered with a different API there.

CSS that is added

15 rules go into the stylesheet that components.json points at:

A link-underline utility, for links in prose.
Twelve syntax-highlighting rules for code blocks, keyed on .editor-code .hljs-* classes.
Two rules for the empty block placeholder, keyed on .slate-editor [data-block-placeholder].

The registry also writes the editor's CSS variables into the @theme, light and dark blocks of that stylesheet. They are listed in Theming.

The audio and video players arrive with their own stylesheet rules, which import the vidstack base and caption styles.

Check the install

The editor folder exists at components/blocks/notion-like-editor/ and its index.tsx exports NotionLikeEditorBlock and NotionLikeEditorStatic.
Your stylesheet gained the --editor-* variables. Tailwind v4 scans your project by default, so the classes inside the new folder need no extra configuration.
Import the editor from your components alias and run your type check. The import path is @/components/blocks/notion-like-editor.
Every dependency is installed: the Plate packages, KaTeX, highlight.js and zod.