Related projects

A carefully curated list of libraries that are worth having a look at.

Because the scope of problems MUI solves is bound, we try to play nicely with other libraries. Feel free to submit a pull request to add another project; it will be accepted if it is suitable.

Design resources

A set of reusable components for design tools is available, designed to match the React components, and to help you craft great products:

• Figma: A large UI kit with over 600 handcrafted MUI components.
• Adobe XD: A large UI kit with over 600 handcrafted MUI components.
• Sketch: A large UI kit with over 600 handcrafted MUI symbols.
• UXPin: A large UI kit of MUI components. The design tool renders the components in a web runtime. It uses the same React implementation as your production environment.

Images and illustrations

• Unsplash: 📷 A great resource for finding beautiful, high-resolution, free photos that you can use in your projects.
• unDraw: 📐 Like Unsplash but for amazing vector illustrations.
• Simple Icons: Over 1000 Free SVG icons for popular brands.

Application frameworks

• react-admin: A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs.

IDE tools

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

Components

This is a collection of third-party projects that extend MUI.

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.

Notification

• notistack: Makes it easy to display snackbars (so you don't have to deal with open/close state of them).

Upload

• material-ui-dropzone: Built on top of react-dropzone.

Form

• react-hook-form: React hook for form validation.
• formik-material-ui: Bindings for using MUI with formik.
• redux-form-material-ui: Bindings for using MUI with Redux Form.
• mui-rff: Bindings for using MUI with React Final Form.
• @ui-schema/ds-material Bindings for using MUI with UI Schema, JSON Schema compatible
• @data-driven-forms/mui-component-mapper: Bindings for using MUI with Data Driven Forms.

Carousel

• material-auto-rotating-carousel: Introduce new users to your app.

Image

• mui-image: The only MUI image component to satisfy the Material guidelines for loading images.
• material-ui-image: Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.

Scheduler/Calendar

• dx-react-scheduler-material-ui: A scheduler/calendar component for MUI with multiple calendar views, editing, recurrence appointments and date navigation features (paid license).

Chart

• dx-react-chart-material-ui: Charts for MUI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more (paid license).

Dialog

• material-ui-confirm: Provides easy to use confirmation dialogs to simplify confirming user actions without writing boilerplate code.

Color picker

• material-ui-color: Collections of color components for material-ui. No dependencies, small, highly customizable and theming support!

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 MUI, such as a Footer, a CookiesBanner, a BackToTop button, and other highly customizable complex elements, to help devs build the macro parts of their UI very quickly. Those components are often duplicated across sites. This library solves this exact problem.

Theming

• material-ui-theme-editor: A tool to generate themes for your MUI applications by just selecting the colors and having a live preview.
• Material palette generator: The Material palette generator can be used to generate a palette for any color you input.