Getting Started With Mantine

Mantine is an open-source collection of React components.

npm install @mantine/core @mantine/hooks @mantine/utils
npm install @blocknote/core @blocknote/react @blocknote/mantine

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

If your application already uses Mantine UI, you should use the @blocknote/mantine/blocknoteStyles.css stylesheet instead. It only contains the styles added by BlockNote on top of the Mantine core styles, whereas @blocknote/mantine/style.css includes both.

GitHub

StackBlitz

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

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

  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

Getting Started With Mantine

On this page

Learn

Collaborate

Community

Legal

Theme