Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Update Material UI Related Projects page #34203

Merged
merged 6 commits into from
Mar 30, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
<p class="description">A carefully curated list of third-party tools that expand or build on top of Material UI's component library.</p>

Developers from the MUI community have built some excellent supplemental tools for working with Material UI—this page gathers the best that we've seen.

Do you have a project that you think should be featured here?
We would love to see it.
We'd love to see it.
Feel free to submit a pull request!

## Design resources
Expand All @@ -13,43 +14,45 @@ Feel free to submit a pull request!

## IDE tools

- [Material UI Snippets](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets): VSCode extension providing snippets.
- [Material UI Codemorphs](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-codemorphs): VSCode extension providing codemods.
- [eslint: detect unused classes](https://github.com/jens-ox/eslint-plugin-material-ui-unused-classes): ESLint plugin to detect unused styling classes with `@mui/styles`.

## Theming

- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material UI applications that features live previewing.
- [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design palette generator can be used to generate a palette for any color you choose.

## Components

### Layout

- [@mui-treasury/layout](https://mui-treasury.com/layout/): Components to handle the overall layout of a page. You can find a couple of examples, e.g. [a reactjs.org clone](https://mui-treasury.com/layout/clones/reactjs/).
- [@mui-treasury/layout](https://mui-treasury.com/layout/): Components to handle the overall layout of a page. Check out examples such as [a reactjs.org clone](https://mui-treasury.com/layout/clones/reactjs/).

### Image

- [mui-image](https://mui-image.surge.sh): The only Material UI image component to satisfy the Material Design guidelines for loading images.
- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Adds a "materializing" effect to images so they fade in like [Material's image loading pattern](https://m1.material.io/patterns/loading-images.html) suggests.
- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Adds a "materializing" effect to images so they fade in like [Material Design's image loading pattern](https://m1.material.io/patterns/loading-images.html) suggests.

### Chips

- [mui-chips-input](https://viclafouch.github.io/mui-chips-input/): A chips input designed for the React library MUI.
- [mui-chips-input](https://viclafouch.github.io/mui-chips-input/): A chips input designed for use with Material UI.

### Phone Number

- [mui-tel-input](https://viclafouch.github.io/mui-tel-input/): A phone number input designed for the React library MUI built with [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js).
- [mui-tel-input](https://viclafouch.github.io/mui-tel-input/): A phone number input designed for use with Material UI, built with [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js).

### Color picker
### One-Time Password

- [mui-color-input](https://viclafouch.github.io/mui-color-input/): A color input designed for the React library MUI built with [TinyColor](https://tinycolor.vercel.app/).
- [material-ui-color](https://github.com/mikbry/material-ui-color): Collections of color components for Material UI. No dependencies, small, highly customizable, and supports theming.
- [mui-otp-input](https://viclafouch.github.io/mui-otp-input): A One-Time Password input designed for use with Material UI.

### Sparkline
### File

- [mui-plus](https://mui-plus.vercel.app/components/Sparkline): A sparkline is a tiny chart that can be used to indicate the trend of a value.
- [mui-file-input](https://viclafouch.github.io/mui-file-input): A file input designed for use with Material UI.

## Blocks
### Color picker

- [components-extra](https://github.com/alexandre-lelain/components-extra): Provides a set of "molecule" components built on top of Material UI, such as a `Footer`, a `CookiesBanner`, a `BackToTop` button, and other complex elements.
- [mui-color-input](https://viclafouch.github.io/mui-color-input/): A color input designed for use with Material UI, built with [TinyColor](https://tinycolor.vercel.app/).
- [material-ui-color](https://github.com/mikbry/material-ui-color): Collections of color components for Material UI. No dependencies, small, highly customizable, and supports theming.

## Theming
### Sparkline

- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material UI applications that features live previewing.
- [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design palette generator can be used to generate a palette for any color you choose.
- [mui-plus](https://mui-plus.vercel.app/components/Sparkline): A sparkline is a tiny chart that can be used to indicate the trend of a value.