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.

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