@nish1896/rhf-mui-components

A suite of 25+ production-ready Material UI components for react-hook-form — fully typed, tree-shakable, and built to cut form boilerplate down to a handful of props.

⚡ Powered by Mui-Components

Every component delegates its rendering and core logic to @nish1896/mui-components - born from this project, now used internally as its rendering engine.

Worth checking out if:

• You're building forms with plain React state or any other form library
• You want Material UI components for common fields, pre-wired, without writing the binding logic yourself

✨ Features

• Each component is fully functional with just 2-3 props — core logic handled internally.
• Style individual components or apply global styles via ConfigProvider.
• Includes well-configured unique components like Phone Input, Country Select, File Uploader and Tags Input, saving development time for specific use cases.
• Provides full control over value validation and transformation before updates are committed to form state.
• Comprehensive docs showcasing multiple variations for each component.

📦 Installation

npm install @nish1896/rhf-mui-components react-hook-form @mui/material @mui/x-date-pickers

react-hook-form, @mui/material and @mui/x-date-pickers are peer dependencies — v4 supports MUI v6 and v7.

Need MUI v5? Stick with the latest v3 release instead.

import { useForm } from 'react-hook-form';
import RHFTextField from '@nish1896/rhf-mui-components/mui/textfield';

function ProfileForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: { name: '' }
  });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <RHFTextField
        name="name"
        control={control}
      />
    </form>
  );
}

Explore and Get Started

📖 Documentation

Full setup instructions, API references, and examples for every component:

👉 Documentation Website

🎮 Interactive Demos

Try out the form components live, no install required:

👉 Live Demo Examples

🧪 Playgrounds

Spin up an editable sandbox in your browser — fork it and experiment freely:

🛠️ Local Development

This is a pnpm monorepo — the published package lives in packages/rhf-mui-components, with a demo app and docs site in apps/.

Run the setup script:

bash scripts/setup.sh

This will:

• Install node_modules in the workspace root.
• Build the @nish1896/rhf-mui-components package.
• Add this package as a dependency in @nish1896/rhf-mui-demo to test new and existing components.

After making changes to the package, rebuild it with:

pnpm lib

🤝 Contributing

This project has been an individual effort so far, and I'd love to invite collaborators — whether that's a new component, a doc improvement, or a bug fix. See CONTRIBUTING.md for the branch naming convention and release process, and CODE_OF_CONDUCT.md for community guidelines.

Feel free to reach out directly at nishantkohli96@gmail.com.

You can also check out my eslint config to format and prettify your JavaScript/TypeScript code.

License

MIT © Nishant Kohli