react-styleguidist

React Styleguidist is a development tool that gives teams a shared, interactive catalog of their React components. Instead of having to dig through source code to understand how a button, form field, or card component works, developers and designers can browse a generated website that shows each component alongside live, editable examples. Change the code in the example and the preview updates instantly.

The catalog is sometimes called a living style guide because it stays in sync with the actual codebase. Each component's accepted inputs (called props in React) are automatically listed, and you write usage examples in simple Markdown files that sit next to the component code. When someone on the team asks how a certain component behaves with different inputs, they can try it in the style guide rather than setting up a separate test page.

To get started you install the package through npm, point it at the folder containing your components, and run the built-in development server. The tool works with Create React App projects without any extra setup. For other setups you configure how it loads your code by adjusting a configuration file. There is also a command to build a static version of the style guide that can be published to a website and shared with stakeholders who are not running the project locally.

The README lists several real projects that use React Styleguidist, including component libraries from Microsoft and others, which gives a sense of what the output looks like in practice. Third-party extensions add snapshot testing and visual regression testing on top of the base tool.

It is open source and accepts contributions. Sponsors can have their logo displayed in the repository. The project's documentation lives on its own website and covers configuration, CLI options, and a cookbook of common tasks.