Use with ShadCN

This example shows how you can use BlockNote with ShadCN (instead of Mantine).

Relevant Docs:

Getting Started with ShadCN

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.
        }
      }
    />
  );
}

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.        }      }    />  );}

Use with ShadCN

Learn

Collaborate

Community

Legal

Theme