React Styleguidist **Isolated React component development environment with a living style guide** [![Build Status](https://travis-ci.org/styleguidist/react-styleguidist.svg)](https://travis-ci.org/styleguidist/react-styleguidist) [![npm](https://img.shields.io/npm/v/react-styleguidist.svg)](https://www.npmjs.com/package/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) [![Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/branch/master/graph/badge.svg)](https://codecov.io/gh/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/). ![](https://d3vv6lp55qjaqc.cloudfront.net/items/271B372x102S0c052i3F/react-styleguidist7.gif) ## Usage * **[Getting Started](https://react-styleguidist.js.org/docs/getting-started.html): install and run Styleguidist** * [Documenting components](https://react-styleguidist.js.org/docs/documenting.html): how to write documentation * [Locating components](https://react-styleguidist.js.org/docs/components.html): point Styleguidist to your React components * [Configuring webpack](https://react-styleguidist.js.org/docs/webpack.html): tell Styleguidist how to load your code * [Cookbook](https://react-styleguidist.js.org/docs/cookbook.html): how to solve common tasks with Styleguidist ## 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](http://hallister.github.io/semantic-react/) * [Dialog Components](https://dialogs.github.io/dialog-web-components/) * [Bulma Components](http://bokuweb.github.io/re-bulma/) * [More projects…](https://github.com/styleguidist/react-styleguidist/issues/127) ## Integration with other tools * Create React App — just works, see the [Getting Started](https://react-styleguidist.js.org/docs/getting-started.html) guide! * [TypeScript](https://github.com/styleguidist/react-docgen-typescript) ## Resources * [Building React Components Library](https://skillsmatter.com/skillscasts/8140-building-react-components-library) talk by [Robert Haritonov](https://github.com/operatino) * [Interview with Artem Sapegin](https://survivejs.com/blog/styleguidist-interview/) about React Styleguidist. ## Advanced documentation * [Configuration](https://react-styleguidist.js.org/docs/configuration.html) * [CLI commands and options](https://react-styleguidist.js.org/docs/cli.html) * [Node API](https://react-styleguidist.js.org/docs/api.html) ## 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 review the [contributing guidelines](.github/Contributing.md). ## Authors and license [Artem Sapegin](http://sapegin.me) and [contributors](https://github.com/styleguidist/react-styleguidist/graphs/contributors). MIT License, see the included [License.md](License.md) file.