Using ShadCN, Radix and Tailwind with BlockNote

shadcn/ui (opens in a new tab) is an open-source collection of React components based on Radix (opens in a new tab) and Tailwind. To use BlockNote with shadcn, you can import BlockNoteView from @blocknote/shadcn (instead of from @blocknote/mantine) and the stylesheet from @blocknote/shadcn/style.css.

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