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 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'd 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

• eslint-plugin-material-ui-unused-classes: ESLint plugin to detect unused styling classes with @mui/styles.

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.

Components

Layout

• MUI Treasury Layout: Components to handle the overall layout of a page. Check out examples such as a legacy.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 Design's image loading pattern suggests.

Chips

• mui-chips-input: A chips input designed for use with Material UI.

Phone Number

• mui-tel-input: A phone number input designed for use with Material UI, built with libphonenumber-js.

One-Time Password

• mui-otp-input: A One-Time Password input designed for use with Material UI.

File

• mui-file-input: A file input designed for use with Material UI.

Color picker

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

Rich text

• mui-tiptap: A customizable Material UI-styled WYSIWYG (What You See Is What You Get) rich text editor, using Tiptap.

Sparkline

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

Admin frameworks

• React-admin: A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs.
• Refine: An open source, headless React meta-framework for the rapid development of web applications.