Skip to main content

Customization with themes and interactive elements

Docusaurus offers a high degree of flexibility when it comes to customization. From themes and styling to interactive elements like animations and diagrams — here are a few examples of what you can do.

Themes and styling​

Docusaurus ships with ready-made themes that are easy to use and customize. Here are a few ways you can create a unique visual identity for your site:

Classic themes​

  • Docusaurus provides a default theme that can be used right out of the box.
  • Easily customize colors, logo, and typography by modifying CSS or adding customCss in docusaurus.config.js.

Custom themes​

  • Create completely custom themes using @docusaurus/theme-classic as a foundation.
  • Use React components to build unique layouts and page templates.

Interactive elements​

Interactive components make your documentation more engaging and user-friendly. Here are a few possibilities:

Animations​

Add animated elements to guide users or enhance the experience.

The following CSS adds a "bounce and squeeze" effect to an image:

.jumping-dino {
  animation: bounce-squeeze 3s ease-in-out infinite;
  transform-origin: bottom; 
  max-width: 70%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@keyframes bounce-squeeze {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) scaleY(1); /* Original position and proportion */
  }
  40% {
    transform: translateY(-80px) scaleY(1.2); /* Highest point with stretch */
  }
  60% {
    transform: translateY(0) scaleY(0.8); /* Landing at ground level with squeeze */
  }
}
Jumping Docusaurus

Diagrams with Mermaid​

Docusaurus supports Mermaid, making it possible to create interactive diagrams directly in Markdown/MDX.

Code blocks with copy button​

Show code examples with a copy button to help users quickly reuse code.

Example:

console.log('Hello, Docusaurus!');

✨ Click "Next" to finish the tour! ✨