Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Mar 23 2018 05:16
    ZxBing0066 opened #887
  • Mar 22 2018 21:22
    sapegin closed #886
  • Mar 22 2018 16:17
    sapegin labeled #886
  • Mar 22 2018 16:17
    sapegin labeled #886
  • Mar 22 2018 14:36
    stefanheine opened #886
  • Mar 22 2018 11:24
    sapegin labeled #826
  • Mar 22 2018 11:24
    sapegin closed #867
  • Mar 22 2018 11:23
    sapegin closed #883
  • Mar 22 2018 10:34
    sapegin closed #885
  • Mar 22 2018 09:49
    sapegin closed #881
  • Mar 22 2018 09:44
    RusinovAnton opened #885
  • Mar 22 2018 09:32
    sapegin closed #882
  • Mar 22 2018 09:32
    sapegin milestoned #883
  • Mar 22 2018 09:31
    sapegin labeled #883
  • Mar 22 2018 09:31
    sapegin labeled #884
  • Mar 22 2018 08:15
    sapegin edited #195
  • Mar 21 2018 22:56
    jsphstls opened #884
  • Mar 21 2018 20:14
    denchen edited #883
  • Mar 21 2018 20:13
    denchen opened #883
  • Mar 21 2018 18:08
    sapegin milestoned #868
Adam Heim
Cloned the repo and compiled it locally, linking to my repo where all the errors are and everything worked.
Even reverted back to the commit the beta2 tag is on and compiled and everything was fine.
I have no clue what is wrong.
Mahmoud Zakria
Hey guys, I'm using styleguidist with a third-party library and PropTypes doesn't generated unless I re-write the components from scratch in a new file
I can't find any solution in the provided solution page
I want to remove these warnings and generate PropTypes
Mahmoud Zakria
Mahmoud Zakria
Lukasz Gonciarz
Hi all,
Lukasz Gonciarz
I am new to styleguidist.
I have a structure like eg. src/components/icons/about-bg/...
I can not make it to work with this structure.
What happens? When it generates links for the sidebar it removes dash so about-bg becomes aboutbg, then when I am trying to create some preview with .md it does not work at all (was trying with require without success). Any idea?
Hi all!
I'm using styleguidist to create a showcase. For each component, beside a NameComponent.md file to run the example, I have a ComponentDOC.md file that explain some developers choice and deepen the usage of the Component.
Is it possible to link the ComponentDOC.md file from the NameComponent.md file?
Hi all!
I'm using styleguidist to create a showcase. For each component, beside a NameComponent.md file to run the example, I have a ComponentDOC.md file that explain some developers choice and deepen the usage of the Component.
Is it possible to link the ComponentDOC.md file from the NameComponent.md file?
Eivind Løland-Andersen
Hi! I'm trying to simplify the component example pages, by splitting the content into tabs. (Button.md => Button.code.md + Button.accessibility.md + Button.usage.md, and hide the relative content behind tabs.) How would you propose to do this?
Khalid Azam
Hi All, is there any way to do visual teating for the style guide component
I see, storybook has visual testing —> https://storybook.js.org/testing/automated-visual-testing/
can we do similar visual testing for react styleguide
Christopher Dieringer

hi all. i'm seeing an unexpected webpack error:

  Local:            http://localhost:6060/
  On your network:

./node_modules/react-styleguidist/lib/rsg-components/Editor/EditorLoader.js 76:6
Module parse failed: 'import' and 'export' may only appear at the top level (76:6)
You may need an appropriate loader to handle this file type.
|       var _this2 = this;
>       import('rsg-components/Editor/Editor').then(function (module) {
|         _this2.setState({
|           editor: module.default
 @ ./node_modules/react-styleguidist/lib/rsg-components/Editor/index.js 1:0-61 1:0-61

my styleguidist config is ~==

  skipComponentsWithoutExample: true,
  styleguideDir: path.join(__dirname, 'docs'),
  title: '...',
  webpackConfig, // require('/path/to/react-scripts/config/webpack.dev.js')('development')
  components: 'src/client/components/**/*.tsx'

any idea?

Christopher Dieringer
i expected the react-scripts config to just work
Joan Mira


I've just released sugUI, a design system template based on Styleguidist that uses the sugUI components library: https://gazpachu.github.io/sugui-design-system/

Zeljko Marinkovic
Hi all Is it posible to make options like in image, to have name, type, desc cols...
Khalid Azam
@gazpachu : love it
Michell Ocaña
hi everyone! i want to hide a custom propType from my component documentation, is there a way to do it with rsg?
hi . i use create-react-app
Warning: Cannot parse src/components/Card/Card.jsx: SyntaxError: Invalid regular expression flag (1:8)

It usually means that react-docgen does not understand your source code, try to file an issue here:
import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// @material-ui/icons

// core components
import cardStyle from "./cardStyle.jsx";

function Card({ ...props }) {
    const { classes, className, children, plain, carousel, ...rest } = props;
    const cardClasses = classNames({
        [classes.card]: true,
        [classes.cardPlain]: plain,
        [classes.cardCarousel]: carousel,
        [className]: className !== undefined
    return (
        <div className={cardClasses} {...rest}>

Card.propTypes = {
    classes: PropTypes.object.isRequired,
    className: PropTypes.string,
    plain: PropTypes.bool,
    carousel: PropTypes.bool,
    children: PropTypes.object.isRequired

export default withStyles(cardStyle)(Card);
what is my wrong?
and i have styleguide.config.js whith follow lines
propsParser: require("react-docgen").parse,
    webpackConfig: require("react-scripts/config/webpack.config")
Савенков Илья

Hello, I use react-styleguidist": "^9.0.0, I use ES import in jsx in README.md

import Button from ".../Button";


and see error:
import or require() statements can be added only by editing a Markdown example file: .../Button.

What am I doing wrong?

Tobias Lohse
Hi, I'm just trying to figure out how to use styleguidist for react native. Do I understand correctly, that styleguidist only allows rendering a style guide with react-native-web but doesn't really generate a style guide in a react-native app? It seems like the app in the code example doesn't really use anything from react-styleguidist
Matthew Bulfair
Does anyone know how to add some kind of code clipboard with the latest version ? I am running 9x
Iraitz Puente

Hello! I'm having an issue when trying to make the build of my styleguide it says: Cannot read property 'endsWith' of undefined

I've read and created a styleguide.config.js with this:
module.exports = { webpackConfig: require('./node_modules/react-scripts/config/webpack.config.js'), };

But same message

Patrick Macom
Is there a way to include markdown code snippets without styleguidist automatically creating an example from it?
I'm looking for something similar to ```jsx noEditor
The code doesn't really provide a ```jsx noExample that I know of. Any help would be greatly appreciated. I could also submit a PR for this feature if it's necessary.
Opps. Nevermind lol. Found ```jsx static
:thumbsup: I love this tool! Keep up the great work. I'll try to contribute too
Matthew Bulfair
how do I get code snippets to show the clipboard option?

hey i'm wondering in the styleguide config, is it possible to exclude files based on regex?

for example. .. i'm trying to exclude any files that starts with a _

components: 'src/components/**/*.jsx',
ignore: ['**/components/App.jsx', '**/components/**/^_.*.jsx'],

but i couldn't seem to get it to work

Ilya Lytvynov
Hello, did somebody try to use styleguidist with react-jss, any examples how to connect it?
Hi guys, some one could help with CSS?
Andy Cook
Hi, I am rendering my styleguide with one page per section (pagePerSection: true) but the default page of the styleguide shows all the components on one long page. Is there a way to have a custom page (eg index.md) as the default page?
Andy Cook
I was able to achieve the default page by introducing sections, and having the first section with just a markup file, no components
Maciej Stankiewicz
Is there a way to change the env passed to webpack? Now it is set to "development". I'd like to have something like --env.styleguide
Joonas Kallunki
Hi! I did not get pagePerSection to work with sections: [{components: () => ...}] so I made a codesandbox example that shows the problem, is it a bug or something in the API design or just do not understand? https://github.com/styleguidist/react-styleguidist/issues/1145#issuecomment-487824219
Joonas Kallunki
Hey! I'm using React-axe to validate accessibility of the components I create with Styleguidist. But Styleguidist has accessibility errors so it makes the validating a bit harder - I created a PR to fix those errors: styleguidist/react-styleguidist#1359
After if we get the PR through I could make a simple example and/or post how to use Styleguidist to develop accessibility validated components :)
hey guys i am having issues during parsing of my modules:

`Module parse failed: Unexpected token (5:7)
You may need an appropriate loader to handle this file type.
| import IconSVG, { Props as IconSVGProps } from './IconSVG';

export type Props = IconSVGProps & {`

Daniel K.
hi, does anyone knows why a file with React hook needs to have TSX extension to be considered a "component"? when I tried with TS extension it did not bother with loading it