Introduction

"MUI Components is a one-stop solution for reusable form components — use them with react state, 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.

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.

Package Structure

Components are available through focused subpath exports, so applications only import the modules they use.

Click a folder to expand its contents and view the form components available for that module.

• @nish1896/mui-components
  mui
  mui-pickers
  misc
  config
  form-helpers

• mui - Includes core Material-UI components such as TextField, Select, and others.
• mui-pickers - Contains Material-UI date and time picker components, along with their variations - Desktop, Mobile and Static.
• misc - Features external form components, such as the rich text editor, that are not part of Material-UI.
• config - Provides a Context Provider to set default styles for all components and configure the dateAdapter for date and time pickers.
• form-helpers - Utility functions used internally by the components, which can also be leveraged by developers for processing and validating form data.