alexxnica / react-styleguidist

Style guide generator & component workbench for React

Style guide — documentation — component workbench

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.

Usage

• Getting Started: install and run Styleguidist
• Documenting components: how to write documentation
• Locating components: point Styleguidist to your React components
• Configuring webpack: tell Styleguidist how to load your code
• Cookbook: how to solve common tasks with Styleguidist

Examples

• Basic style guide, source
• Style guide with sections, source
• Style guide with customized styles, source
• Style guide with custom express endpoints, source
• Create React App integration, source

Showcase

Real projects using React Styleguidist:

• Rumble Charts
• better-react-spinkit
• Semantic UI Components for React
• Dialog Components
• Bulma Components
• More projects…

Integration with other tools

• Create React App — just works, see the Getting Started guide!
• TypeScript

Resources

• Building React Components Library talk by Robert Haritonov
• Interview with Artem Sapegin about React Styleguidist.

Advanced documentation

• Configuration
• CLI commands and options
• Node API

Change log

The change log can be found on the Releases page.

Contributing

Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.

Authors and license

Artem Sapegin and contributors.

MIT License, see the included License.md file.