Using Other Component Libraries

While BlockNote's default UI uses the Mantine (opens in a new tab) component library, you can configure it to use other libraries instead.

Using Ariakit/ShadCN

BlockNote has plug & play support for Ariakit (opens in a new tab) and ShadCN (opens in a new tab). You can switch to them just by importing BlockNoteView from either @blocknote/ariakit or @blocknote/shadcn instead of @blocknote/mantine, as well as the corresponding CSS file.

import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/ariakit";
import "@blocknote/ariakit/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} />;
}
 

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

If you want BlockNote to use customized ShadCN components instead of the default ones, you can pass them using the shadCNComponents prop of BlockNoteView:

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

You can pass components from the following ShadCN modules:

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

Using Your Own Components

If you want to use a different component library to Mantine/Ariakit/ShadCN, you will have to provide your own BlockNoteView implementation using the BlockNoteViewRaw component and a ComponentsContext:

import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
import {
  BlockNoteViewRaw,
  Components,
  ComponentsContext,
} from "@blocknote/react";
import { ComponentProps } from "react";
 
export const components: Components = {
  ...
};
 
export const BlockNoteView = <
  BSchema extends BlockSchema,
  ISchema extends InlineContentSchema,
  SSchema extends StyleSchema
>(
  props: ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>
) => {
  return (
    <ComponentsContext.Provider value={components}>
      <BlockNoteViewRaw {...props} />
    </ComponentsContext.Provider>
  );
};

The components you want BlockNote to use should be added to components. To see exactly how this object is structured, which components you need to provide, and what props each component should take, see this source file (opens in a new tab).