BlockNote
DocsDocsExamplesExamplesPricingPricingAboutAbout
GitHubGitHubDiscordDiscord
  • 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)
    • Events
    • Methods
  • 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
Styling & Theming

Styling & Theming

You can completely change the look and feel of the BlockNote editor. Change basic styling quickly with theme CSS variables, or apply more complex styles with additional CSS rules.

If you want to change, remove, or entirely replace the React components for menus & toolbars, see UI Components.

MethodsThemes

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.