With Ariakit

Ariakit is an open-source library of unstyled (headless), primitive components with a focus on Accessibility. To use BlockNote with Ariakit, you can import BlockNoteView from @blocknote/ariakit

npm install @blocknote/core @blocknote/react @blocknote/ariakit

You can fully style the components with your own CSS, or import the provided default styles using the CSS file from @blocknote/ariakit/style.css.

GitHub

StackBlitz

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} />;
}

With Ariakit

Learn

Collaborate

Community

Legal

Theme