{"id":11874,"library":"react-styleguidist","title":"React Styleguidist","description":"React Styleguidist is a robust tool for generating living style guides and developing React components in isolation. It provides a hot-reloaded development server where developers can view, interact with, and document components. The current stable version is 13.1.4, with recent maintenance releases addressing bug fixes and minor improvements, typically seeing several releases per year including minor versions and patches. Key differentiators include its reliance on Markdown files for component documentation, automatic listing of `propTypes`, and the ability to show live, editable usage examples. It also offers extensive configuration options for Webpack and theming, allowing deep integration into existing project setups. Unlike some alternatives, it focuses on generating a static style guide from existing components and their documentation, rather than being a visual drag-and-drop builder, promoting a documentation-driven development workflow.","status":"active","version":"13.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/styleguidist/react-styleguidist","tags":["javascript","react","jsx","styleguide","style guide","documentation","docs","generator","component","typescript"],"install":[{"cmd":"npm install react-styleguidist","lang":"bash","label":"npm"},{"cmd":"yarn add react-styleguidist","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-styleguidist","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for React component rendering.","package":"react","optional":false},{"reason":"Required peer dependency for React DOM rendering.","package":"react-dom","optional":false}],"imports":[{"note":"The primary programmatic API is a CommonJS default export factory function. ESM `import` is not commonly used or directly supported for the Node.js API without a transpilation step.","wrong":"import styleguidist from 'react-styleguidist';","symbol":"styleguidist","correct":"const styleguidist = require('react-styleguidist');"},{"note":"Configuration files like `styleguide.config.js` typically use CommonJS `module.exports` for their configuration object. While ESM syntax might work in some environments with proper setup, `module.exports` is the idiomatic and most compatible approach.","wrong":"export default { /* config */ };","symbol":"styleguide.config.js (config export)","correct":"module.exports = { /* config */ };"},{"note":"The `build` method is available on the object returned by the `react-styleguidist` factory function, not as a direct named export from the package.","wrong":"import { build } from 'react-styleguidist';","symbol":"styleguidist(config).build","correct":"const styleguidist = require('react-styleguidist')(config); styleguidist.build((err, conf) => { /* ... */ });"}],"quickstart":{"code":"{\n  \"name\": \"my-component-library\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"styleguide\": \"styleguidist start\",\n    \"styleguide:build\": \"styleguidist build\"\n  },\n  \"dependencies\": {\n    \"react\": \">=18.0\",\n    \"react-dom\": \">=18.0\"\n  },\n  \"devDependencies\": {\n    \"react-styleguidist\": \"^13.1.4\",\n    \"babel-loader\": \"^9.0.0\",\n    \"@babel/core\": \"^7.0.0\",\n    \"@babel/preset-env\": \"^7.0.0\",\n    \"@babel/preset-react\": \"^7.0.0\"\n  }\n}\n\n// styleguide.config.js\nmodule.exports = {\n  components: 'src/components/**/*.jsx',\n  webpackConfig: {\n    module: {\n      rules: [\n        {\n          test: /\\.jsx?$/,\n          exclude: /node_modules/,\n          loader: 'babel-loader',\n          options: {\n            presets: ['@babel/preset-env', '@babel/preset-react']\n          }\n        }\n      ]\n    }\n  },\n  title: 'My Component Library Style Guide'\n};\n\n// src/components/Button/Button.jsx\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction Button({ children, onClick = () => {} }) {\n  return (\n    <button\n      style={{\n        padding: '10px 20px',\n        border: 'none',\n        borderRadius: '5px',\n        backgroundColor: '#2D9EE0',\n        color: 'white',\n        cursor: 'pointer',\n      }}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n}\n\nButton.propTypes = {\n  /**\n   * Button content\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * Click handler\n   */\n  onClick: PropTypes.func,\n};\n\nexport default Button;\n\n// src/components/Button/Button.md\n```## Button\n\nA versatile button component.\n\n### Usage\n\n```jsx\n<Button onClick={() => alert('Clicked!')}>Click Me</Button>\n```\n\n```jsx\n<Button>Another Button</Button>\n```\n```","lang":"javascript","description":"This quickstart sets up a basic `react-styleguidist` project. It includes `package.json` scripts, a `styleguide.config.js` with Babel for JSX support, a simple `Button` component, and its accompanying Markdown documentation."},"warnings":[{"fix":"Upgrade your project's `react` and `react-dom` dependencies to version `^17.0.0` or `^18.0.0`.","message":"React Styleguidist v13.0.0 dropped support for React 16. Projects using v13 or later must use React 17 or newer.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Upgrade your project's `webpack` and `webpack-cli` dependencies to version `^5.0.0`.","message":"React Styleguidist v12.0.0 deprecated support for Webpack 4. If you are using v12 or higher, your project must use Webpack 5.","severity":"breaking","affected_versions":">=12.0.0"},{"fix":"For functional components, migrate `defaultProps` to use default parameter values or destructuring with defaults directly in the function signature (e.g., `function Button({ children, onClick = () => {} })`).","message":"The `defaultProps` property on functional components is deprecated in modern React (v18+). While React Styleguidist v13.1.3 fixed an internal bug related to `defaultProps`, direct usage on functional components is discouraged.","severity":"gotcha","affected_versions":">=13.1.3"},{"fix":"Carefully review the 'Configuring Webpack' section in the official documentation. Ensure all necessary loaders (e.g., `babel-loader`, `css-loader`) and plugins are installed as dev dependencies and correctly configured in `styleguide.config.js`.","message":"Incorrect Webpack configuration is a common source of issues, leading to compilation failures or components not rendering correctly within the style guide. React Styleguidist internally uses Webpack and allows extensive customization.","severity":"gotcha","affected_versions":">=11.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade Webpack to version 5: `npm install webpack@^5 webpack-cli@^4 --save-dev`.","cause":"Your project is using `react-styleguidist` v12 or higher with Webpack 4.","error":"Error: Webpack 4 is no longer supported."},{"fix":"Upgrade `react` and `react-dom` to version 18 or higher: `npm install react@^18.0.0 react-dom@^18.0.0`.","cause":"Your project is running `react-styleguidist` v13.1.1 or higher with an older version of React or ReactDOM.","error":"Error: You must install peer dependencies: react@>=18.0 react-dom@>=18.0"},{"fix":"Install the missing loader as a development dependency: `npm install --save-dev babel-loader` (replace `babel-loader` with the actual missing loader).","cause":"Your `styleguide.config.js` requires a specific Webpack loader (e.g., `babel-loader`), but it has not been installed as a dependency in your project.","error":"Error: Cannot find module 'babel-loader' (or similar loader name)"},{"fix":"Pass your configuration object to the `react-styleguidist` factory function to instantiate it correctly: `const styleguidist = require('react-styleguidist')(config); styleguidist.build(...);`","cause":"Attempting to call `.build()` or `.server()` directly on `require('react-styleguidist')` without passing a configuration object to the factory function.","error":"TypeError: Cannot read properties of undefined (reading 'build')"}],"ecosystem":"npm"}