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
Who can help me solve this problem
Eduardo Reis Nobre
Hi guys, kinda of a dumb question... but how do I add my styles to the preview written on the markdown files on my project?
2 replies
Jagadeesh Avvaru
Hi all!! I am in the process of converting all of my .jsx files to typescript (.tsx). I would like to generate documentation for props in .jsx and .tsx files in my project. Is there any way to use react-docgen and react-docgen-typescript at the same time in styleguide.config.js to generate documentation for props?
Andrew Blowe
What is the best way to add multiple example tabs, for example one tab for React, and one for Vanilla html? I was able to get it to work, but it was very clunky to implement so I was hoping there was a straighforward solution. Here's what I have above ^
Jamie Woodmancy

Hey there, I'm using Styled Components in a React Native project, and they work great. However, we're at a point where we want to start documenting our components. I've read and re-read the docs for standard and third-party configurations. I've also done gone over the config steps and examples from both the RN and SC example repos. The docs page loads when I run locally, but the components aren't styled. I prefer using the css={css...} syntax, because it allows me to pass fewer props. But I've also tried the styled.Text syntax. Neither way seems to be passing the styling to the elements.

Also, I've confirmed that my theme values are received at the component level. So that's not the problem.

Has anyone else had any luck with this kind of setup or know what I might be doing wrong?

Aavgeen singh
Hey folks. I am getting a Unexpected token error for JSX when i try to serve the docs using styleguidist server
Here is my webpack config:
 webpackConfig: {
    module: {
      rules: [
        // Babel loader will use your project’s babel.config.js
          test: /\.js?$/,
          exclude: new RegExp('/node_modules/(?!react-kuic).*/'),
          loader: 'babel-loader'
        // Other loaders that are needed for your components
          test: /\.css$/,
          use: ['style-loader', 'css-loader', 'postcss-loader']
          test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3|ico)$/,
          use: ['file-loader']
Hi, can i export the markdown files when run styleguidist build?
Esa Juhana
How do I EASILY sort components in alphabetical order when I have components in subfolders too, such as /forms/input, /forms/checkable
Esa Juhana
juliane nagao
Hi, how do I enable the props and methods tab?
1 reply
Esa Juhana

MVP method for ordering the components in alphabetical order:

Make folder names such as "001_color" or so, gather all components with Barrelsby or something similar

001_color is the first one on sidebar
Is there any support for multiple tabs in the code example ?
Has anyone set up a library with Styleguidist that's using styled-components and JS (not TypeScript!) and has a public repo? I have a good handle on Styleguidist but I'm starting a fresh library for work and want to use styled-components, which I've never used before. I'd like to see examples of best practices for component structure and setup, but most that I've found use TypeScript and I'm not familiar enough with that to pick out the relevant parts.
Rohit Garg
Esa Juhana

Have you experienced this...

Links to components are not working in build version. For example


Just goes to my first component, which is accordion (instead to textarea)

I am using: "pagePerSection: true,"
Jagadeesh Avvaru

Currently, StyleGuidist generates one parent comonent StyleGuide and all other components are part of it except ReactExample component. So, the structure would be like in the image.
I want to wrap all of it with a single theme component

<StyleGuide />
<ReactExample />
<ReactExample />
<ReactExample />

Does any know if that is possible with Styleguidist ?

5 replies
Jagadeesh Avvaru

Styleguidist example.png

my usecase is bit different.
If you navigate to the URL here - https://react-styleguidist.js.org/examples/basic/ , you would see list of examples in React styleguidist. Open the developer tools and if you have the extension - React Developer Tools, you would see a tab called 'Components' and you can see how the components are rendered. So, i want to wrap all of the components of the StyleGuidist with my custom theme provider.

my end goal of my issue to get something like below, so that I can use theme colors in all of my examples.

<StyleGuide />
<ReactExample />
<ReactExample />
<ReactExample />

Is there any way we can do this using Styleguidist or using build process?

Senad Glojnaric-Poric
Hello everyone,
I have a question about testing. I just ran a test on my Styleguidist clone repo and it failed. I tested before any change in the code.
Here is my log file:
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'test:jest'
1 verbose cli ]
2 info using npm@6.14.8
3 info using node@v12.18.4
4 verbose run-script [ 'pretest:jest', 'test:jest', 'posttest:jest' ]
5 info lifecycle react-styleguidist@11.0.0-beta2~pretest:jest: react-styleguidist@11.0.0-beta2
6 info lifecycle react-styleguidist@11.0.0-beta2~test:jest: react-styleguidist@11.0.0-beta2
7 verbose lifecycle react-styleguidist@11.0.0-beta2~test:jest: unsafe-perm in lifecycle true
8 verbose lifecycle react-styleguidist@11.0.0-beta2~test:jest: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;F:\repo\react-styleguidist\node_modules.bin;C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;F:\repo\react-styleguidist\node_modules.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files (x86)\Skype\Phone\;C:\ProgramData\chocolatey\bin;C:\Users\GameDev\AppData\Roaming\Python\Python38\Scripts;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\Program Files\MySQL\MySQL Shell 8.0\bin\;C:\Users\GameDev\AppData\Local\Programs\Python\Python38-32\Scripts\;C:\Users\GameDev\AppData\Local\Programs\Python\Python38-32\;C:\Users\GameDev\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\GameDev\AppData\Local\GitHubDesktop\bin;C:\Users\GameDev\AppData\Roaming\Python\Python38\Scripts;C:\Users\GameDev\AppData\Roaming\npm
9 verbose lifecycle react-styleguidist@11.0.0-beta2~test:jest: CWD: F:\repo\react-styleguidist
10 silly lifecycle react-styleguidist@11.0.0-beta2~test:jest: Args: [ '/d /s /c', 'jest' ]
11 silly lifecycle react-styleguidist@11.0.0-beta2~test:jest: Returned: code: 1 signal: null
12 info lifecycle react-styleguidist@11.0.0-beta2~test:jest: Failed to exec test:jest script
13 verbose stack Error: react-styleguidist@11.0.0-beta2 test:jest: jest
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid react-styleguidist@11.0.0-beta2
15 verbose cwd F:\repo\react-styleguidist
16 verbose Windows_NT 6.1.7601
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "test:jest"
18 verbose node v12.18.4
19 verbose npm v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error react-styleguidist@11.0.0-beta2 test:jest: jest
22 error Exit status 1
23 error Failed at the react-styleguidist@11.0.0-beta2 test:jest script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Senad Glojnaric-Poric
Could someone give me a hand with this? Thanks!
Senad Glojnaric-Poric
Solved the issue.
Hey, anyone setup styleguidist with typescript
props dissapeared for me after usingin docgen
Jagadeesh Avvaru
You need to use react-docgen-typescript package to parse the props. Here is the how you can use it - https://github.com/styleguidist/react-docgen-typescript
Erik Himiranov
Hi there. I have React app with webpack and other stuff. I have some problem with examples (.md files). When I use styleguidist on my local machine everything works perfect, but when I run styleguidist in docker, I see TypeError: code.appendLeft is not a function error in example blocks. I found out that error occurres when I use jsx in example. Does anyone know what it's error mean and how to fix it?
Erik Himiranov
I fixed it, sorry (f*ck package-lock)
Cedric Matheus

Guys I have a conflict in the React Styleguidist.

I'm rendering a component with routes, and it's managing to manipulate the styleguidist's routes.

Is there a way to fix this?

Cedric Matheus
I fixed it changing the rendered router to memory router.

I'm getting an error when starting styleguidist server. I receive

Warning: Cannot parse src/components/Panel/Panel.module.scss: SyntaxError: Panel/Panel.module.scss: Unexpected keyword 'import' (1:1)
@import "~pathtoscssvars/vars.scss";

I'm pointing styleguidist to the same webpack.config I run the project with, and does work when the app is run with webpack-dev-server. Any thoughts as to what is going wrong here?

  • Network:
    ERROR Failed to compile with 1 errors 4:09:59 PM

    error in ./node_modules/react-docgen-typescript/lib/parser.js

Module not found: Error: Can't resolve 'fs' in '/Users/light/Documents/Landray_company/mk-project/simple-ui/node_modules/react-docgen-typescript/lib'

you guys get same error ?
Is there a chat with discussions around contributing to react-styleguist are happening? I see new alpha releases for v12, but nothing tracking the changelog
Jason Williams
I have created a React Styleguidist Discord server https://discord.gg/QWsybqJDTA feel free to join if you're already on there. Ill be updating the readme too later.
hi, can i use styleguide.config.ts config file?
my webpack config file is typescript file
anybody can help me?

Here's my styleguide.config.js

// styleguide.config.js
const path = require('path');

module.exports = {
title: 'UI React Components',
sections: [
name: 'Getting Started',
content: 'GettingStarted.md',
name: 'Atoms',
sections: [
name: 'Components',
components: () => [
components: 'src/lib/[A-Z]/**/.js',
styleguideComponents: {
Wrapper: path.join(dirname, 'styleguide/Wrapper'),
TableOfContentsRenderer: path.join(
serverPort: 6161,
showSidebar: true,
skipComponentsWithoutExample: true,
template: {
favicon: './src/assets/favicon.io',
theme: {
fontFamily: {
base: 'Circular',
color: {
link: '#0F15D4',
linkHover: '#343DF5',
sidebarBackground: '#E6E6E6',
codeBackground: '#F5F5F5',
codeBase: '#4B4B4B',
styles: {
StyleGuide: {
content: {
minWidth: 'unset',
maxWidth: 'unset',
width: 'auto',

My Anchor component:
import PropTypes from 'prop-types';
import React from 'react';
import styled, { css } from 'styled-components';

import { smallerThan } from '../../../style/variables';

const getMargin = p => (p.mL ? '0 0 0 4px' : p.mR ? '0 4px 0 0' : p.margin);

const AnchorStyle = styled.a text-decoration: none; margin: ${p => getMargin(p)}; font-size: ${p => p.fontSize || p.theme.anchor.fontSize}; font-family: ${p => p.fontFamily || p.theme.anchor.fontFamily}; font-weight: ${p => p.fontWeight}; cursor: pointer; color: ${p => p.color || p.theme.anchor.color}; ${p => css
${p.padding && padding: ${p.padding}};
}; &:hover { color: ${p => p.colorHover || p.theme.anchor.hover}; text-decoration: ${p => p.decorationHover || 'underline'}; } &:active { color: ${p => p.colorActive || p.theme.anchor.active}; } / need verification from design / &:visited { color: ${p => p.colorActive || p.theme.anchor.visited}; } @media (${smallerThan.tablet}) { font-size: ${p => p.fontSizeMobile || p.theme.anchor.fontSizeMobile}; } ;

const Anchor = props => <AnchorStyle href={props.href ? props.href : '#'} {...props}>{props.text};

Anchor.propTypes = {
children: PropTypes.node,
/* Theme default: font color /
color: PropTypes.string,
Theme default: font color hover /
colorHover: PropTypes.string,
/ Theme default: font color active /
colorActive: PropTypes.string,
Theme default: font color visited - undefined /
colorVisited: PropTypes.string,
/ Theme default: underline text on hover /
decorationHover: PropTypes.string,
Theme default: body font /
fontFamily: PropTypes.string,
/ Theme default: body font size - 16px /
fontSize: PropTypes.string,
Theme default: body font mobile size - 12px /
fontSizeMobile: PropTypes.string,
fontWeight: PropTypes.string,
/ Default: 0 unless mL or mR is passed /
margin: PropTypes.string,
Adds margin-left for inline links. If true: '0 0 0 4px' /
mL: PropTypes.bool,
/ Adds margin-right for inline links. If true: '0 4px 0 0' /
mR: PropTypes.bool,
padding: PropTypes.string,
text: PropTypes.string,
href: PropTypes.string,
onClick: PropTypes.func,
onKeyDown: PropTypes.func,

export { Anchor, AnchorStyle };

I am currently importing the component like import { Anchor } from '@frontend/ui-components'; This results into the import of my entire library and it makes my bundle (main.js) to be more than 1MB.

I want to do like import { Anchor } from '@frontend/ui-components/Anchor' so that I only import Anchor component and my bundle is not too big; But when I do like this I get errors.

Am I missing something?

I add raw-loader to import .md, but fail
Does anyone know what styleguidist uses to create their docs? Specifically this page https://react-styleguidist.js.org/docs/cookbook.