@batoanng/mui-components

Ship consistent interfaces faster with a shared component library, bundled theme tokens, test utilities, and form-ready building blocks.

• Built on MUI 9
• Organized by Atomic Design (Atoms, Molecules, Forms)
• Theming support (Light/Dark mode, tokenized palette, typography)
• Custom hooks and utilities

• Built on MUI 9
• Organized by Atomic Design (Atoms, Molecules, Forms)
• Theming support (Light/Dark mode, tokenized palette, typography)
• Custom hooks and utilities
• Ready-to-use with ThemeProvider and CssBaseline
• Developer tooling: Storybook, Vitest, ESLint, Prettier
• Published on npm and deployed Storybook: mui-components-batoanng.vercel.app

---

Bring the package into your project with the published npm entrypoint.

npm install @batoanng/mui-components

npm install @batoanng/mui-components

You must also install peer dependencies if not already present:

npm install react react-dom @mui/material @mui/icons-material @mui/utils @emotion/react @emotion/styled framer-motion react-hook-form

Some exports need optional peer dependencies:

npm install @mui/x-date-pickers react-dropzone react-idle-timer

---

The package exports both theme primitives and ready-to-use components for immediate adoption.

import { CssBaseline, ThemeProvider } from '@mui/material';
import { Button, defaultTheme } from '@batoanng/mui-components';

export function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <CssBaseline />
      <Button variant="contained">Launch</Button>
    </ThemeProvider>
  );
}

Wrap your application with the theme provider:

import { defaultTheme } from '@batoanng/mui-components';
import { CssBaseline, ThemeProvider } from '@mui/material';

export default function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <CssBaseline />
      {/* Your app components */}
    </ThemeProvider>
  );
}

Use components:

import { Button } from '@batoanng/mui-components';

<Button variant="contained">Click me</Button>;

---

• . -> types: ./dist/src/index.d.ts, import: ./dist/components.js, default: ./dist/components.js
• ./test-utils -> types: ./dist/src/test-utils.d.ts, import: ./dist/test-utils.js, default: ./dist/test-utils.js

• main: ./dist/components.js
• module: ./dist/components.js
• types: ./dist/src/index.d.ts

• .storybook
• eslint.config.mjs
• nodemon.json
• package.json
• prettier.config.cjs
• src/
• tsconfig.build.json

• @emotion/react
• @emotion/styled
• @mui/icons-material
• @mui/material
• @mui/utils
• @mui/x-date-pickers
• @testing-library/react
• framer-motion
• react
• react-dom
• react-dropzone
• react-hook-form
• react-idle-timer

• @batoanng/utils
• @batoanng/eslint-config
• @batoanng/prettier-config
• @batoanng/tsconfig
• @batoanng/vite-config

• @batoanng/utils
• @batoanng/eslint-config
• @batoanng/prettier-config
• @batoanng/tsconfig
• @batoanng/vite-config

• Refine button hover states so contained, outlined, and text variants keep readable colors and use subtle theme-aware state changes.
• Fix outlined input focus styling so the field background no longer covers the visible border.
• Move test utilities from the root bundle to @batoanng/mui-components/test-utils.
• Reduce package output by dropping the UMD build and externalizing runtime dependencies from the library bundle.
• Update package metadata, peer dependency docs, and package-size guardrails.

src/
├── components/
│   ├── atoms/           # Base building blocks (e.g., Button, Label)
│   ├── molecules/       # Compound components (e.g., IdleTimer)
│   ├── form/            # Input controls and validation-aware forms (integrated with react-hook-form)
│   └── index.ts         # Entry point for all component exports

All components are re-exported via @batoanng/mui-components:

import { FormTextField } from '@batoanng/mui-components';

Test utilities are exported from a separate subpath so production bundles do not include Testing Library:

import { render, screen } from '@batoanng/mui-components/test-utils';

---

Common commands:

pnpm dev             # Start Storybook
pnpm test            # Run unit tests with Vitest
pnpm lint            # Run ESLint
pnpm format          # Format with Prettier
pnpm build           # Build library output
pnpm clean           # Remove local build, Storybook, cache, and package install artifacts

Linting is configured through the local flat config entrypoint at eslint.config.mjs, which composes:

• @batoanng/eslint-config
• @batoanng/eslint-config/typed
• @batoanng/eslint-config/test

---

View the full component library online:

👉 https://mui-components-batoanng.vercel.app/

To run locally:

pnpm dev

---

A fully typed, themeable, and accessible component library built with React, TypeScript, and Material UI (MUI). It follows atomic design principles and ships with a complete theming system, hooks, test utilities, and form support to accelerate UI development across multiple projects.

---

• Built on MUI 9
• Organized by Atomic Design (Atoms, Molecules, Forms)
• Theming support (Light/Dark mode, tokenized palette, typography)
• Custom hooks and utilities
• Ready-to-use with ThemeProvider and CssBaseline
• Developer tooling: Storybook, Vitest, ESLint, Prettier
• Published on npm and deployed Storybook: mui-components-batoanng.vercel.app

---

npm install @batoanng/mui-components

You must also install peer dependencies if not already present:

npm install react react-dom @mui/material @mui/icons-material @mui/utils @emotion/react @emotion/styled framer-motion react-hook-form

Some exports need optional peer dependencies:

npm install @mui/x-date-pickers react-dropzone react-idle-timer

---

Wrap your application with the theme provider:

import { defaultTheme } from '@batoanng/mui-components';
import { CssBaseline, ThemeProvider } from '@mui/material';

export default function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <CssBaseline />
      {/* Your app components */}
    </ThemeProvider>
  );
}

Use components:

import { Button } from '@batoanng/mui-components';

<Button variant="contained">Click me</Button>;

---

src/
├── components/
│   ├── atoms/           # Base building blocks (e.g., Button, Label)
│   ├── molecules/       # Compound components (e.g., IdleTimer)
│   ├── form/            # Input controls and validation-aware forms (integrated with react-hook-form)
│   └── index.ts         # Entry point for all component exports

All components are re-exported via @batoanng/mui-components:

import { FormTextField } from '@batoanng/mui-components';

Test utilities are exported from a separate subpath so production bundles do not include Testing Library:

import { render, screen } from '@batoanng/mui-components/test-utils';

---

Located in src/theme/, it includes:

• Light and Dark theme create function
• Custom spacing, radii, shadows, typography
• Color palette consistent with brand/UI tokens

Usage:

import { defaultTheme, createDefaultTheme } from '@batoanng/mui-components';

const lightTheme = createDefaultTheme({}); // Light theme is default
const darkTheme = createDefaultTheme({ darkTheme: true });

<ThemeProvider theme={lightTheme}>...</ThemeProvider>
<ThemeProvider theme={darkTheme}>...</ThemeProvider>

---

Common commands:

pnpm dev             # Start Storybook
pnpm test            # Run unit tests with Vitest
pnpm lint            # Run ESLint
pnpm format          # Format with Prettier
pnpm build           # Build library output
pnpm clean           # Remove local build, Storybook, cache, and package install artifacts

Linting is configured through the local flat config entrypoint at eslint.config.mjs, which composes:

• @batoanng/eslint-config
• @batoanng/eslint-config/typed
• @batoanng/eslint-config/test

---

View the full component library online:

👉 https://mui-components-batoanng.vercel.app/

To run locally:

pnpm dev

---

The published package is checked with npm pack --dry-run. Local folder size can be much larger because ignored generated folders such as node_modules/.cache and storybook-static are created during development.