Getting Started With ShadCN

shadcn/ui is an open-source collection of React components based on Radix and Tailwind.

npm install @blocknote/core @blocknote/react @blocknote/shadcn

To use BlockNote with shadcn, you can import BlockNoteView from @blocknote/shadcn 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