A next-generation tool to create blazing-fast documentation sites


Below, we go over how to add a component-controls documentation site to new Gatsby projects, existing React projects, and existing Gatsby projects.
You can find a git repo and a live site.

New project

Create a new folder:
mkdir my-gatsby-project && cd my-gatsby-project
Initialize the project:
yarn init -y
Add Gatsby and react dependencies:
yarn add gatsby react react-dom


"scripts": {
"build": "gatsby build",
"start": "gatsby develop"
The remaining steps are the same as for existing Gatsby projects.

Existing (non-Gatsby) React project

All you have to do is add Gatsby as a dependency:
yarn add gatsby
Then follow the steps for existing Gatsby projects.

Existing Gatsby project

Add component-controls theme

yarn add @component-controls/gatsby-theme-stories

Configure theme

Create a gatsby-config.js file in your project's home directory:


module.exports = {
plugins: [
resolve: '@component-controls/gatsby-theme-stories',
options: {
configPath: '.config',

Create your documentation site

Check our create a documentation site tutorial