With ShadCN

shadcn/ui is an open-source collection of React components based on Radix and Tailwind.

npm install @blocknote/core @blocknote/react @blocknote/shadcn

To use BlockNote with shadcn, you can import BlockNoteView from @blocknote/shadcn and the stylesheet from @blocknote/shadcn/style.css.

GitHub

StackBlitz

import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/shadcn";
import "@blocknote/shadcn/style.css";

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();

  // Renders the editor instance using a React component.
  return (
    <BlockNoteView
      editor={editor}
      shadCNComponents={
        {
          // Pass modified ShadCN components from your project here.
          // Otherwise, the default ShadCN components will be used.
        }
      }
    />
  );
}

ShadCN Customization

BlockNote comes with default shadcn components. However, it's likely that you have copied and possibly customized your own shadcn components in your project. To make BlockNote use the ShadCN components from your project instead of the default ones, you can pass them using the shadCNComponents prop of BlockNoteView:

import * as Button from "@/components/ui/button"
import * as Select from "@/components/ui/select"

return (
  <BlockNoteView editor={editor} shadCNComponents={{
    Select,
    Button,
    ...
  }} />
);

You can pass components from the following ShadCN modules:

Badge
Button
Card
DropdownMenu
Form
Input
Label
Popover
Select
Tabs
Toggle
Tooltip

To ensure compatibility, your ShadCN components should not use Portals (comment these out from your DropdownMenu, Popover and Select components).

With ShadCN

ShadCN Customization

On this page

Learn

Collaborate

Community

Legal

Theme