Use with ShadCN
This example shows how you can integrate BlockNote with ShadCN, replacing the default Mantine UI with ShadCN components.
Relevant Docs:
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.
}
}
/>
);
}