BlockNote
DocsDocsExamplesExamplesPricingPricingAboutAbout
CTRL K
GitHubGitHubDiscordDiscord
CTRL K
  • Introduction
  • Quickstart
  • Editor Basics
    • Editor Setup
    • Document Structure
    • Default Schema
  • Editor API
    • Manipulating Blocks
    • Manipulating Inline Content
    • Cursor & Selections
    • Markdown & HTML
    • Server-side processing
    • Export to PDF
    • Export to docx (Office Open XML)
    • Export to ODT (Open Document Text)
  • Styling & Theming
    • Themes
    • Overriding CSS
    • Adding DOM Attributes
  • UI Components
    • Block Side Menu
    • Formatting Toolbar
    • Suggestion Menus
  • Custom Schemas
    • Custom Blocks
    • Custom Inline Content
    • Custom Styles
  • Collaboration
    • Real-time collaboration
    • Comments
    • Advanced Tables
    • BlockNote with Ariakit
    • BlockNote with ShadCN and Tailwind
    • Code Block Syntax Highlighting
    • Grid Suggestion Menus
    • Next.js and BlockNote
    • Paste Handling
    • Usage Without React (Vanilla JS)
  • Community ↗ (opens in a new tab)
Question? Give us feedback → (opens in a new tab)Edit this page on GitHub
Docs
UI Components

Changing UI Components

BlockNote includes a number of UI Components (like menus and toolbars) that can be completely customized:

  • Block Side Menu
  • Formatting Toolbar
  • Suggestion Menus
Last updated on April 1, 2025
Adding DOM AttributesBlock Side Menu

Footer

BlockNote

BlockNote is an extensible React rich text editor with support for block-based editing, collaboration and comes with ready-to-use customizable UI components.

Learn

  • Documentation
  • Examples
  • Releases

Collaborate

  • Partner with us
  • Sponsorships
  • Contribute

Community

  • GitHub
  • Discord

Legal

  • Terms & Conditions
  • Privacy Policy

Theme

© 2025 BlockNote maintainers. All rights reserved.