The Trees component allows you to display interactive file and folder trees directly in your Docusaurus pages. Perfect for documenting project structure, explaining architecture, or presenting code examples.
This remark/MDX plugin automatically replaces certain words in your .mdx/.md content with other text, an icon, or even a React component (e.g., Tooltip). It’s ideal for keeping terminology consistent, adding contextual help, or “styling” recurring keywords.
The plugin walks Markdown/MDX text nodes, skips certain parents (links, headings, code…), merges all + the current section (blog/pages/docs), sorts keys by decreasing length, then replaces with plain text or MDX components. Matching is Unicode‑safe to avoid false positives inside words.
Combined with a Tooltip component, this plugin lets you build a real interactive glossary: authors write plain Markdown, and the plugin replaces terms with rich components (tooltips, icons, buttons) without extra effort.
This component adds a fixed floating Back to Top button. It becomes visible after the user scrolls 300px vertically; on click it triggers a smooth scroll to the top while playing a short visual animation on the icon. It does not expose public props: customization (threshold, image) is done by editing the source (index.js). The goal is to keep it lightweight and easy to reuse.
Readers learn faster when they can modify an example inline. The @docusaurus/theme-live-codeblock theme integrates react-live to evaluate JSX in real time.
Benefits:
Tooltips are everywhere on the web. They are essential for providing contextual information without cluttering the interface. But creating one that is robust, aesthetically pleasing, and above all, accessible, is a real challenge.
In this article, I will introduce the Tooltip component I developed for Docusaurus. It doesn't just display a simple information box; it integrates intelligent positioning logic, an arrow that always stays aligned, and great customization flexibility.
The Skill component allows displaying skills as progress bars or animated circles with scroll animations and complete customization.
I've added JSDoc comments in the code to explain each prop and its function. I've never done this before but I think I'll keep this habit.
This component allows you to easily display Iconify icons in MDX pages of Docusaurus.
It is particularly useful for displaying logos (GitHub, Airbnb, Google, etc.) without having to import each icon individually.
Want to integrate Simple Analytics into your Docusaurus site and effectively track user navigation in a Single Page Application (SPA) context?
This guide explains how to create a local plugin for Docusaurus that handles the injection of the tracking script and tracks page changes.
It manages the injection of the main script as well as tracking page changes in the context of a Single Page Application (SPA), which is essential for Docusaurus.
This plugin is a local plugin. There's no need to install it via npm or yarn. Simply ensure that the simpleAnalytics folder is located in the plugins directory at the root of your project.
With Infima CSS framework, I’ve created a reusable card component that you can use on your Docusaurus site. With it, you’ll be able to customize each card with different colors and sizes. This component allows you to generate all the cards available in Infima as well as “Custom” cards, and you’ll be able to create and personalize each card independently.
The component is in fact a set of small components that will admit to form the cards.
An amazing component to display your images on click! Lighten up your documentation presentations or blog articles - it's easy to implement and creates a clean, professional look.
