MUI Storybook

This project is Storybook for MUI v5 default components.

Progress

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. 😄

Why

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.

Installation

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.

Local Development

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

Contribute Guide

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.

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):

ryota-murakami 💻 📖 ⚠️

Sai Tharun

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