@nish1896/mui-components

A suite of 25+ production-ready, form-library-agnostic Material UI components — fully typed, tree-shakable, and driven by a single value / onValueChange pair. Build forms with any form library (React Hook Form, TanStack Form, Formik, plain React state) or drop in each component standalone.

📋 Using react-hook-form in your application?

Skip writing the form UI logic and grab the purpose-built sibling: @nish1896/rhf-mui-components - the same Material UI components, with first-class RHF bindings baked in.

✨ Features

• Every component is designed to work out of the box with minimal configuration, allowing you to focus on building features instead of implementing core logic..
• Form-library-agnostic: every component is controlled through value / onValueChange, so it works with React Hook Form, TanStack Form, Formik, plain React state, or on its own — no adapter or wrapper required.
• Style individual components or apply global styles via ConfigProvider.
• Includes well-configured unique components like OTP Input, Country Select, File Uploader and Tags Input, saving development time.
• Provides full control over value validation and transformation before updates are committed to the component state.
• Comprehensive docs showcasing multiple variations for each component.

📦 Installation

npm install @nish1896/mui-components @mui/material @mui/icons-material @mui/x-date-pickers

@mui/material, @mui/system, @mui/icons-material and @mui/x-date-pickers are peer dependencies.

v2 requires MUI v9 — for MUI v6/v7 support, stay on the 1.x line.

⬆️ Upgrading from 1.x? See the v1 → v2 migration guide.

import { useState } from 'react';
import MUITextField from '@nish1896/mui-components/mui/textfield';

function ProfileForm() {
  const [name, setName] = useState<string>();
  return (
    <MUITextField
      fieldName="name"
      value={name}
      onValueChange={({ newValue }) => setName(newValue)}
    />
  );
}

Explore and Get Started

📖 Documentation

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

👉 Documentation Website

🧪 Playground

Playground code lives on the v2-playground branch. Clone repo, checkout that branch, run locally:

git clone https://github.com/nishkohli96/mui-components.git
cd mui-components
git checkout v2-playground
pnpm install
pnpm dev

🛠️ Local Development

This is a pnpm monorepo — the published package lives in packages/mui-components, and documentation website in apps/docs.

Run the setup script:

bash scripts/setup.sh

This will:

• Install node_modules in the workspace root.
• Build the @nish1896/mui-components package.
• Add this package as a dependency in @nish1896/mui-components-docs 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