MENU


React Styleguidist

React Styleguidist allows you to visualize and interactively showcase your React components as you code them. It fills a similar role to Storybook, though Storybook is far more widely adopted today and has a much larger ecosystem of add-ons; Styleguidist remains a lighter-weight option, particularly if you want your component docs generated from a single style guide page rather than individual stories. To install it:

Installing React Styleguidist
npm install --save-dev react-styleguidist

By default, Styleguidist will search for components using this glob pattern: 'src/components/**/*.{js,jsx,ts,tsx}'.

It will pick up files like:

But will ignore tests: files in the __tests__ folder, and files containing .test.js or .spec.js (or the same for .jsx, .ts, and .tsx).

If it doesn't work for you, create a styleguide.config.js file in your project's root folder and configure the patterns to fit your project structure.

To launch the Styleguidist development server:

Launching the Styleguidist dev server
npx styleguidist server