React Styleguidist

Getting Started with React Styleguidist

1. Install Styleguidist

Install webpack if you don’t have it already and not using Create React App:

npm install --save-dev webpack

Install Styleguidist:

npm install --save-dev react-styleguidist

2. Configure your style guide

If you’re using Create React App you can skip this step.

Point Styleguidist to your React components and tell how to load your code.

3. Add npm scripts for convenience

Add these scripts to your package.json:

{
  "scripts": {
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build"
  }
}

4. Start your style guide

Run npm run styleguide to start style a guide dev server.

Run npm run styleguide:build to build a static version.

5. Start documenting your components

See how to document your components

Have questions?