# react-styleguidist > React components style guide generator Latest version **13.1.4** (published 2025-01-07) · MIT license · 0 weekly downloads ## Install ```sh npm install react-styleguidist pnpm add react-styleguidist yarn add react-styleguidist bun add react-styleguidist ``` Provides the command `styleguidist`. ## Health **Score 45/100 (D)** — status: maintenance-mode. Positive: has types; esm support; no vulnerabilities; high quality score; popular repo. Warnings: low downloads. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 13.1.4 | | Published | 2025-01-07 | | First published | 2015-09-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=14 | | Dependencies | 64 | | Unpacked size | 410.6 KB | | Known vulnerabilities | 0 (+7 in 2 direct dependencies) | | Install scripts | no | | GitHub stars | 11062 | | Author | Artem Sapegin | | Maintainers | okonet, sapegin | | Keywords | react, jsx, styleguide, style guide, documentation, docs, generator, component, components | ## Links - npm: https://www.npmjs.com/package/react-styleguidist - Repository: https://github.com/styleguidist/react-styleguidist - Issues: https://github.com/styleguidist/react-styleguidist/issues - Funding: https://opencollective.com/styleguidist - npm.io page: https://npm.io/package/react-styleguidist ## Dependencies (64) - [jss](https://npm.io/package/jss.md) ^10.9.0 - [mri](https://npm.io/package/mri.md) ^1.1.4 - [ora](https://npm.io/package/ora.md) ^4.0.2 - [q-i](https://npm.io/package/q-i.md) ^2.0.1 - [qss](https://npm.io/package/qss.md) ^2.0.3 - [clsx](https://npm.io/package/clsx.md) ^1.0.4 - [glob](https://npm.io/package/glob.md) ^7.1.5 - [acorn](https://npm.io/package/acorn.md) ^6.4.1 - [buble](https://npm.io/package/buble.md) 0.20.0 - [glogg](https://npm.io/package/glogg.md) ^1.0.2 - [kleur](https://npm.io/package/kleur.md) ^3.0.3 - [assert](https://npm.io/package/assert.md) 1.5.0 - [findup](https://npm.io/package/findup.md) ^0.1.5 - [lodash](https://npm.io/package/lodash.md) ^4.17.15 - [recast](https://npm.io/package/recast.md) ~0.18.5 - [remark](https://npm.io/package/remark.md) ^13.0.0 - [to-ast](https://npm.io/package/to-ast.md) ^1.0.0 - [core-js](https://npm.io/package/core-js.md) ^3.6.4 - [listify](https://npm.io/package/listify.md) ^1.0.0 - [prismjs](https://npm.io/package/prismjs.md) ^1.17.1 - [doctrine](https://npm.io/package/doctrine.md) ^3.0.0 - [hash-sum](https://npm.io/package/hash-sum.md) ^2.0.0 - [acorn-jsx](https://npm.io/package/acorn-jsx.md) ^5.1.0 - [ast-types](https://npm.io/package/ast-types.md) ~0.14.2 - [escodegen](https://npm.io/package/escodegen.md) ^1.12.0 - [common-dir](https://npm.io/package/common-dir.md) ^3.0.0 - [prop-types](https://npm.io/package/prop-types.md) ^15.8.1 - [es6-promise](https://npm.io/package/es6-promise.md) ^4.2.8 - [react-group](https://npm.io/package/react-group.md) ^3.0.2 - [react-icons](https://npm.io/package/react-icons.md) ^3.8.0 - [type-detect](https://npm.io/package/type-detect.md) ^4.0.8 - [is-plain-obj](https://npm.io/package/is-plain-obj.md) ^1.1.0 - [react-docgen](https://npm.io/package/react-docgen.md) ^5.0.0 - [estree-walker](https://npm.io/package/estree-walker.md) ~0.9.0 - [webpack-merge](https://npm.io/package/webpack-merge.md) ^4.2.2 - [@tippyjs/react](https://npm.io/package/@tippyjs/react.md) 4.1.0 - [clipboard-copy](https://npm.io/package/clipboard-copy.md) ^3.1.0 - [github-slugger](https://npm.io/package/github-slugger.md) ^1.2.1 - [lowercase-keys](https://npm.io/package/lowercase-keys.md) ^2.0.0 - [markdown-to-jsx](https://npm.io/package/markdown-to-jsx.md) ^6.11.4 - [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^12.0.0 - [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^2.0.0 - [es6-object-assign](https://npm.io/package/es6-object-assign.md) ~1.1.0 - [jss-plugin-global](https://npm.io/package/jss-plugin-global.md) ^10.9.0 - [jss-plugin-nested](https://npm.io/package/jss-plugin-nested.md) ^10.9.0 - [jss-plugin-compose](https://npm.io/package/jss-plugin-compose.md) ^10.9.0 - [jss-plugin-isolate](https://npm.io/package/jss-plugin-isolate.md) ^10.9.0 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^4.15.0 - [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^11.0.0 - [fastest-levenshtein](https://npm.io/package/fastest-levenshtein.md) ^1.0.9 - [strip-html-comments](https://npm.io/package/strip-html-comments.md) ^1.0.0 - [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^4.0.0 - [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) ^1.0.5 - [javascript-stringify](https://npm.io/package/javascript-stringify.md) ^2.0.0 - [jss-plugin-camel-case](https://npm.io/package/jss-plugin-camel-case.md) ^10.9.0 - [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.3.3 - [function.name-polyfill](https://npm.io/package/function.name-polyfill.md) ^1.0.6 - [jss-plugin-default-unit](https://npm.io/package/jss-plugin-default-unit.md) ^10.9.0 - [mini-html-webpack-plugin](https://npm.io/package/mini-html-webpack-plugin.md) ^3.1.3 - [react-simple-code-editor](https://npm.io/package/react-simple-code-editor.md) ^0.13.1 - [@types/react-test-renderer](https://npm.io/package/@types/react-test-renderer.md) ^18.0.0 - [@vxna/mini-html-webpack-template](https://npm.io/package/@vxna/mini-html-webpack-template.md) ^2.0.0 - [react-docgen-annotation-resolver](https://npm.io/package/react-docgen-annotation-resolver.md) ^2.0.0 - [react-docgen-displayname-handler](https://npm.io/package/react-docgen-displayname-handler.md) ^3.0.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 13.1.4 (latest) — 2025-01-07 - 12.0.0-alpha9.9 (beta) — 2021-07-17 - 13.1.3 — 2024-06-20 - 13.1.2 — 2024-01-19 - 13.1.1 — 2023-02-13 - 13.1.0 — 2023-02-13 - 13.0.0 — 2022-10-14 - 12.0.1 — 2022-10-06 - 12.0.0 — 2022-09-05 - 11.2.0 — 2022-01-27 - 11.1.8 — 2022-01-10 - 12.0.0-alpha9.8 — 2021-07-16 - 11.1.7 — 2021-06-02 - 12.0.0-alpha9.7 — 2021-05-26 - 12.0.0-alpha9.6 — 2021-05-20 - … 308 more at https://npm.io/package/react-styleguidist/versions ## README
React Styleguidist **Isolated React component development environment with a living style guide** [![npm](https://img.shields.io/npm/v/react-styleguidist.svg)](https://www.npmjs.com/package/react-styleguidist) [![CI status](https://github.com/styleguidist/react-styleguidist/workflows/CI/badge.svg)](https://github.com/styleguidist/react-styleguidist.git/actions) [![Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/branch/master/graph/badge.svg)](https://codecov.io/gh/styleguidist/react-styleguidist) [![Join the chat at https://gitter.im/styleguidist/styleguidist](https://badges.gitter.im/styleguidist/styleguidist.svg)](https://gitter.im/styleguidist/styleguidist?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ![Discord](https://img.shields.io/discord/842832186914635806?logo=discord) [![Open Source Helpers](https://www.codetriage.com/styleguidist/react-styleguidist/badges/users.svg)](https://www.codetriage.com/styleguidist/react-styleguidist)
React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component `propTypes` and shows live, editable usage examples based on Markdown files. Check out [**the demo style guide**](https://react-styleguidist.js.org/examples/basic/). ![React Styleguidist in action](https://user-images.githubusercontent.com/1703219/74945569-51c6ad00-543b-11ea-8351-f4d86860893a.gif) [![Washing your code. A book on clean code for frontend developers](https://sapegin.me/images/washing-code-github.jpg)](https://sapegin.me/book/) ## Usage - **[Getting Started](https://react-styleguidist.js.org/docs/getting-started): install and run Styleguidist** - [Documenting components](https://react-styleguidist.js.org/docs/documenting): how to write documentation - [Locating components](https://react-styleguidist.js.org/docs/components): point Styleguidist to your React components - [Configuring webpack](https://react-styleguidist.js.org/docs/webpack): tell Styleguidist how to load your code - [Cookbook](https://react-styleguidist.js.org/docs/cookbook): how to solve common tasks with Styleguidist ## Advanced documentation - [Configuration](https://react-styleguidist.js.org/docs/configuration) - [CLI commands and options](https://react-styleguidist.js.org/docs/cli) - [Node.js API](https://react-styleguidist.js.org/docs/api) ## Examples - [Basic style guide](https://react-styleguidist.js.org/examples/basic/), [source](./examples/basic) - Style guide with sections, [source](./examples/sections) - Style guide with customized styles, [source](./examples/customised) - Style guide with custom express endpoints, [source](./examples/express) - Create React App integration, [source](./examples/cra) ## Showcase Real projects using React Styleguidist: - [Rumble Charts](https://rumble-charts.github.io/rumble-charts/) - [better-react-spinkit](http://better-react-spinkit.benjamintatum.com/) - [Semantic UI Components for React](https://hallister.github.io/semantic-react/) - [Dialog Components](https://dialogs.github.io/dialog-web-components/) - [Bulma Components](https://bokuweb.github.io/re-bulma/) - [Yammer Components](https://microsoft.github.io/YamUI/) - [More projects…](https://github.com/styleguidist/react-styleguidist/issues/127) ## Integration with other tools - Create React App — supported out of the box, see the [Getting Started](https://react-styleguidist.js.org/docs/getting-started) guide - Vue, see [Vue Styleguidist](https://github.com/vue-styleguidist/vue-styleguidist) ## Third-party tools - [snapguidist](https://github.com/styleguidist/snapguidist): snapshot testing for React Styleguidist - [react-styleguidist-visual](https://github.com/unindented/react-styleguidist-visual): automated visual testing for React Styleguidist, using Puppeteer and pixelmatch - [styleguidist-scrapper](https://github.com/livechat/styleguidist-scrapper): scrapper script for documentation generated by React Styleguidist ## Resources - [The Dream of Styleguide Driven Development](https://www.youtube.com/watch?v=JjXnmhNW8Cs) talk by [Sara Vieira](https://github.com/saravieira) - [Building React Components Library](https://skillsmatter.com/skillscasts/8140-building-react-components-library) talk by [Robert Haritonov](https://github.com/operatino) - [Say Cheese: Snapshots and Visual Testing](https://developers.livechatinc.com/blog/snapshots-visual-testing/) - [Interview with Artem Sapegin](https://survivejs.com/blog/styleguidist-interview/) about React Styleguidist. ## Change log The change log can be found on the [Releases page](https://github.com/styleguidist/react-styleguidist/releases). ## Contributing Everyone is welcome to contribute. Please take a moment to read the [contributing guidelines](.github/Contributing.md) and the [developer guide](https://react-styleguidist.js.org/docs/development). ## Sponsoring [Become a sponsor](https://opencollective.com/styleguidist#sponsor) and get your logo on our Readme on GitHub with a link to your site. [Become a backer](https://opencollective.com/styleguidist#backer) get your image on our Readme on GitHub with a link to your site. Buy Me A Coffee ## Authors and license [Artem Sapegin](http://sapegin.me) and [contributors](https://github.com/styleguidist/react-styleguidist/graphs/contributors). Logo by [Sara Vieira](https://github.com/SaraVieira) and [Andrey Okonetchnikov](https://github.com/okonet). MIT License, see the included [License.md](License.md) file. --- _Source: https://npm.io/package/react-styleguidist · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._