# React Styleguidist

[![Build Status](https://travis-ci.org/sapegin/react-styleguidist.svg)](https://travis-ci.org/sapegin/react-styleguidist) [![Dependency Status](https://david-dm.org/sapegin/react-styleguidist.svg)](https://david-dm.org/sapegin/react-styleguidist) [![npm](https://img.shields.io/npm/v/react-styleguidist.svg)](https://www.npmjs.com/package/react-styleguidist)

React Styleguidist is a style guide generator for React components. It lists component `propTypes` and shows live, editable usage examples based on Markdown files. You can use it to generate a static HTML page to share and publish or as a workbench for developing new components using hot reloaded dev server. Check out [**the demo style guide**](http://sapegin.github.io/react-styleguidist/).

Based on Webpack, webpack-dev-server and Babel.

![](https://s3.amazonaws.com/f.cl.ly/items/3i0E1D1L1c1m1s2G1d0y/Screen%20Recording%202015-09-24%20at%2009.49%20AM.gif)

## Documentation

* [Getting started](./docs/GettingStarted.md): installation and documenting components
* [Configuration](./docs/Configuration.md)
* [CLI commands and options](./docs/CLI.md)
* [API](./docs/API.md)
* [FAQ](./docs/FAQ.md)

## Examples

* [Basic style guide](http://sapegin.github.io/react-styleguidist/), [source](./examples/basic)
* Style guide with sections, [source](./examples/sections)
* Style guide with customized styles, [source](./examples/customised)

## Showcase

Real projects using React Styleguidist:

* [Rumble Charts](http://rumbleinc.github.io/rumble-js-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/sapegin/react-styleguidist/issues/127)

## Integration with other tools

* [create-react-app](https://github.com/just-boris/react-app-styleguidist)
* [TypeScript](https://github.com/pvasek/react-docgen-typescript)
* [SourceJS](https://github.com/sourcejs/sourcejs-react-styleguidist)

## 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](http://survivejs.com/blog/styleguidist-interview/) about React Styleguidist.

## Changelog

The changelog can be found on the [Releases page](https://github.com/sapegin/react-styleguidist/releases).

## Contributing

Everyone is welcome to contribute. Please take a moment to review the [contributing guidelines](Contributing.md).

## Authors and license

[Artem Sapegin](http://sapegin.me) and [contributors](https://github.com/sapegin/react-styleguidist/graphs/contributors).

MIT License, see the included [License.md](License.md) file.