How to Document React Components Using docz?


Documenting code is one of the most important and time-heavy processes when developing software.

A lot of time is spent on building and maintaining custom documentation sites.

Docz was created to solve this problem.

Docz enables you to quickly create live-reloading, seo-friendly, production-ready documentation sites with MDX and customize the look, feel and behavior when required by leveraging GatsbyJS and Gatsby theme shadowing.


We started by looking over the options available when you want to create your design system or document your project. We borrowed the best ideas from each and came up with the following guiding principles :

  • Zero config and easy to learn. Avoid unnecessary build steps with confusing setups.
  • Blazing fast. Built with performance in mind from the start.
  • Easy to customize. Create something that will be easy to use and customize.
  • MDX based. Use the best standard for writing documentation.

Getting Started

Start a New Project

Use create-docz-app to quickly get started :

npx create-docz-app my-docz-app
# or
yarn create docz-app my-docz-app --example typescript

Add Docz to an Existing Project

Start by adding Docz as a dependency :

yarn add docz # react react-dom


npm install docz # react react-dom


  • basic – Barebones example.
  • gatsby – Example using Docz in a Gastby project.
  • react native – Using Docz in a React Native project.
  • styled-components – Using Docz with styled-components.
  • with typescript – Using Docz with Typescript.
  • with flow – Using Docz with Flow.
  • with images – Using Docz with images in mdx and jsx.
  • with sass – Using Docz parsing CSS with SASS.
  • with less – Using Docz parsing CSS with LESS.
  • with stylus – Using Docz parsing CSS with Stylus.
  • with css modules: works out of the box with gatsby

You can check the complete list of docz examples here.


Official Website :

HAppy Coding 🙂