MUI Components
NPMGithub

Introduction

"MUI Components is a one-stop solution for reusable form components — use them standalone, or as a wrapper around the form library of your choice."

Every component is a plain controlled component under the hood: pass a value, receive changes through onValueChange, and keep validation wherever you like — useState, React Hook Form, TanStack Form, Formik, or anything else that can hold state.

Head over to the Installation page to add this package to your application, understand the package structure and get started.

Info

For building forms with React Hook Form, we recommend using @nish1896/rhf-mui-components. It offers a similar API to this package but is designed specifically for React Hook Form.

What you get on every field#

  • Accessibility built in — generated ids for field, label and helpertext plus aria-label, aria-labelledby, aria-describedby, aria-invalid and aria-required wired on every field.
  • Thin on top of MUI — nearly all underlying Material UI props pass straight through (variant, slotProps, sx, etc.), so nothing about MUI is hidden from you.
  • Live demo + full props reference — every component page pairs a working example with a complete props table, so you can see the shape before wiring it into your form.

Versions & roadmap#

This library is a port of @nish1896/rhf-mui-components v4 and supports MUI v6 and v7. Development for MUI v9 and the matching MUI X Date Pickers release is already underway, but it will take some time to ship for both packages, as both projects are maintained by a single developer.

PackageVersionStatusCompatibility
@nish1896/mui-componentsv1currentMUI v6 / v7, React 18+
@nish1896/mui-componentsv2plannedMUI v9
@nish1896/rhf-mui-componentsv4maintainedMUI v6 / v7, React 18+
@nish1896/rhf-mui-componentsv5plannedMUI v9