This project is Storybook for MUI v5 default components.

At the time this project progress is not completed.
There are many Components that have not yet been added to the Storybook, and the feature of switch between the default Light Theme and Dark Theme has not yet been implemented.

Please take a look Progress page to track current status, and contribution is really helpful. 😄

This project is being developed to support front-end teams that are MUI users and use Storybook in their workflow.

Although the official MUI documentation is far more useful as a reference, I started this project because I realized that some teams that using Storybook or Chromatic as part of their development process have a need to make the external UI libraries available to everyone in Storybook.

Copy and paste following refs field into the your .storybook/main.js file.

// .storybook/main.js

module.exports = {
  refs: {
    'mui-storybook': {
      title: 'MUI Storybook',
      url: 'https://61c23f8c33dad8003adc12f6-cwovkuxnql.chromatic.com/',
    },
  },
}

And then start storybook like yarn storybook npm run storybook, you'll see the mui-storybook in the your storybook.

git clone https://github.com/saitharunsai/mui-storybook.git
cd mui-storybook
yarn
yarn storybook # launch Storybook dev mode

0. Fork the repository and create your branch from main.
1. Run yarn in the repository root.
2. Run yarn storybook.
3. Run yarn gen <ComponentName>
4. Then you got scaffold like this

yarn gen Paper
yarn run v1.22.18
$ plop Paper
✔  ++ /src/components/Paper/Paper.tsx
✔  ++ /src/components/Paper/Paper.stories.tsx
✨  Done in 0.81s.

MIT

Thanks goes to these wonderful people (emoji key):

ryota-murakami 💻 📖 ⚠️

Sai Tharun

This project follows the all-contributors specification. Contributions of any kind welcome!