Related projects

A carefully curated list of third-party tools that expand or build on top of Material UI's component library.

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. Feel free to submit a pull request!

Design resources

• UXPin: A large UI kit of Material UI components. It renders the components in a web runtime and uses the same React implementation as your production environment.

IDE tools

• Material UI Snippets: VSCode extension providing snippets.
• Material UI Codemorphs: VSCode extension providing codemods.
• eslint: detect unused classes: ESLint plugin to detect unused styling classes with @mui/styles.

Components

Layout

• @mui-treasury/layout: Components to handle the overall layout of a page. You can find a couple of examples, e.g. a reactjs.org clone.

Image

• mui-image: The only Material UI image component to satisfy the Material Design guidelines for loading images.
• material-ui-image: Adds a "materializing" effect to images so they fade in like Material's image loading pattern suggests.

Chips

• mui-chips-input: A chips input designed for the React library MUI.

Phone Number

• mui-tel-input: A phone number input designed for the React library MUI built with libphonenumber-js.

Color picker

• mui-color-input: A color input designed for the React library MUI built with TinyColor.
• material-ui-color: Collections of color components for Material UI. No dependencies, small, highly customizable, and supports theming.

Sparkline

• mui-plus: A sparkline is a tiny chart that can be used to indicate the trend of a value.

Blocks

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

Theming

• material-ui-theme-editor: A tool to generate themes for your Material UI applications that features live previewing.
• Material palette generator: The official Material Design palette generator can be used to generate a palette for any color you choose.