@meonode/mui

A lightweight wrapper around @mui/material components for use with @meonode/ui runtime.

Documentation · MeoNode UI docs

Features

• ✅ Fully typed MUI component wrappers
• 🌳 Tree-shakeable exports
• 🔌 Seamless integration with @meonode/ui
• ⚡ Lightweight runtime with zero additional abstraction overhead

Installation

To get started with @meonode/mui, you need to install the core Material-UI package along with @emotion for styling.

yarn add @mui/material @emotion/react @emotion/styled @meonode/mui
yarn add -D @mui/system @mui/types

or

npm install @mui/material @emotion/react @emotion/styled @meonode/mui
npm install --save-dev @mui/system @mui/types

Optional Packages for Extended Functionality

@meonode/mui provides wrappers for various Material-UI X and Lab components. To use these, you need to install the corresponding @mui package in your project. This ensures you have the necessary underlying libraries for the specific components you wish to use, satisfying the peer dependencies.

Here's a guide for commonly used extended packages and their corresponding @meonode/mui import paths:

| Functionality | @meonode/mui Import Path | Corresponding @mui Package to Install | | :--------------------------- | :------------------------- | :------------------------------------------ | | Material-UI Lab | import { ... } from '@meonode/mui/lab' | yarn add @mui/lab or npm install @mui/lab | | Data Grid | import { ... } from '@meonode/mui/x-data-grid' | yarn add @mui/x-data-grid or npm install @mui/x-data-grid | | Data Grid Pro | import { ... } from '@meonode/mui/x-data-grid-pro' | yarn add @mui/x-data-grid-pro or npm install @mui/x-data-grid-pro | | Data Grid Premium | import { ... } from '@meonode/mui/x-data-grid-premium' | yarn add @mui/x-data-grid-premium or npm install @mui/x-data-grid-premium | | Date Pickers | import { ... } from '@meonode/mui/x-date-pickers' | yarn add @mui/x-date-pickers or npm install @mui/x-date-pickers | | Tree View | import { ... } from '@meonode/mui/x-tree-view' | yarn add @mui/x-tree-view or npm install @mui/x-tree-view | | Tree View Pro | import { ... } from '@meonode/mui/x-tree-view-pro' | yarn add @mui/x-tree-view-pro or npm install @mui/x-tree-view-pro | | Charts | import { ... } from '@meonode/mui/x-charts' | yarn add @mui/x-charts or npm install @mui/x-charts | | Charts Pro | import { ... } from '@meonode/mui/x-charts-pro' | yarn add @mui/x-charts-pro or npm install @mui/x-charts-pro |

Make sure to install only the packages you intend to use to keep your project's dependencies minimal.

Usage

import { Button } from '@meonode/mui'

const MyComponent = () =>
  Button({
    variant: 'contained',
    color: 'primary',
    children: 'Click me',
    onClick: () => alert('Hello from MUI!'),
  })

Documentation

Full guide, component list and examples: ui.meonode.com/docs/mui-integration

License

MIT License © 2025 Ukasyah Rahmatullah Zada

See full text in LICENSE