@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 v5
• Organized by Atomic Design (Atoms, Molecules, Forms)
• Theming support (Light/Dark mode, tokenized palette, typography)
• Custom hooks and utilities

• Built on MUI v5
• 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 @mui/material @mui/icons-material @emotion/react @emotion/styled

---

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 { CssBaseline, ThemeProvider } from '@mui/material';
import { defaultTheme } from '@batoanng/mui-components';

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>

---

• main: ./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
• 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

• Replace published workspace:* development dependency ranges with npm semver ranges.
• Updated dependencies
  • @batoanng/utils@2.4.2

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';

---

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

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 v5
• 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 @mui/material @mui/icons-material @emotion/react @emotion/styled

---

Wrap your application with the theme provider:

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

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';

---

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

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