Material UI Integration

Overview

@meonode/mui is a comprehensive wrapper library that makes all Material-UI components compatible with MeoNode UI's function-based architecture. Instead of manually wrapping components, you can directly import pre-wrapped versions from @meonode/mui and its subpackages.

Installation

Install the wrapper package along with the MUI packages you need:

# Core installation (required)
npm install @meonode/mui @mui/material @emotion/react @emotion/styled

# Optional: Install additional MUI packages as needed
npm install @mui/lab
npm install @mui/x-data-grid
npm install @mui/x-tree-view
npm install @mui/x-date-pickers
npm install @mui/x-charts

Available Packages

@meonode/mui provides wrappers for the entire Material-UI ecosystem:

Usage

Basic Components

All Material-UI components are pre-wrapped and ready to use:

import { Button, TextField, Card, CardContent, Typography } from '@meonode/mui'
import { Column } from '@meonode/ui'

const LoginForm = () =>
  Card({
    sx: { maxWidth: 400, margin: 'auto', padding: 2 },
    children: CardContent({
      children: Column({
        gap: 2,
        children: [
          Typography({
            variant: 'h5',
            children: 'Login'
          }),
          TextField({
            label: 'Email',
            type: 'email',
            fullWidth: true
          }),
          TextField({
            label: 'Password',
            type: 'password',
            fullWidth: true
          }),
          Button({
            variant: 'contained',
            fullWidth: true,
            children: 'Sign In'
          })
        ]
      })
    })
  }).render()

Grid Layout

Use Material-UI's Grid component for responsive layouts:

import { Grid, Card, CardContent, Typography } from '@meonode/mui'

const Dashboard = () =>
  Grid({
    props: {
      container: true, // since `container` is CSS-like property, we need to put it in `props`
    },
    spacing: 3,
    padding: 2,
    children: [
      Grid({
        size: { xs: 12, md: 4 },
        children: Card({
          children: CardContent({
            children: Typography({
              variant: 'h6',
              children: 'Total Users',
            }),
          }),
        }),
      }),
      Grid({
        size: { xs: 12, md: 4 },
        children: Card({
          children: CardContent({
            children: Typography({
              variant: 'h6',
              children: 'Active Sessions',
            }),
          }),
        }),
      }),
      Grid({
        size: { xs: 12, md: 4 },
        children: Card({
          children: CardContent({
            children: Typography({
              variant: 'h6',
              children: 'Revenue',
            }),
          }),
        }),
      }),
    ],
  }).render()

Lab Components

Access experimental components from the lab package:

import { Masonry } from '@meonode/mui/lab'
import { Card, CardContent } from '@meonode/mui'

const images = [/* your image data */]

const Gallery = () =>
  Masonry({
    columns: 3,
    spacing: 2,
    children: images.map(img =>
      Card({
        key: img.id,
        children: CardContent({
          children: /* image content */
        })
      })
    )
  }).render()

Data Grid

Use the powerful DataGrid component:

import { DataGrid } from '@meonode/mui/x-data-grid'

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First name', width: 150 },
  { field: 'lastName', headerName: 'Last name', width: 150 }
]

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon' },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei' }
]

const UserTable = () =>
  DataGrid({
    rows,
    columns,
    initialState: {
      pagination: { paginationModel: { pageSize: 5 } }
    },
    pageSizeOptions: [5, 10, 25],
    checkboxSelection: true
  }).render()

Tree View

Build hierarchical navigation:

import { SimpleTreeView, TreeItem } from '@meonode/mui/x-tree-view'

const FileExplorer = () =>
  SimpleTreeView({
    children: [
      TreeItem({
        itemId: 'src',
        label: 'src',
        children: [
          TreeItem({ itemId: 'components', label: 'components' }),
          TreeItem({ itemId: 'utils', label: 'utils' })
        ]
      }),
      TreeItem({ itemId: 'package.json', label: 'package.json' })
    ]
  }).render()

Date Pickers

Use date and time selection components:

import { DatePicker, LocalizationProvider } from '@meonode/mui/x-date-pickers'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import { Node } from '@meonode/ui'

const DateSelector = () =>
  LocalizationProvider({
    dateAdapter: AdapterDayjs,
    children: DatePicker({
      label: 'Select Date',
      onChange: (newValue) => console.log(newValue)
    })
  }).render()

Charts

Create data visualizations:

import { LineChart } from '@meonode/mui/x-charts'

const SalesChart = () =>
  LineChart({
    width: 500,
    height: 300,
    series: [{ data: [1, 5, 3, 4, 2], label: 'Sales' }],
    xAxis: [{ scaleType: 'point', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] }]
  }).render()

Conditional Rendering

When conditionally rendering MUI components that use hooks, follow the Rules of Hooks:

import { Component } from '@meonode/ui'
import { Card, CardContent, Typography } from '@meonode/mui'
import { useState } from 'react'

// Component using hooks
const UserCard = Component<{ userId: number }>(({ userId }) => {
  const [data, setData] = useState(null) // Uses hooks!

  return Card({
    children: CardContent({
      children: Typography({
        children: `User ${userId}`
      })
    })
  })
})

const App = Component(() => {
  const [showCard, setShowCard] = useState(true)

  return Column({
    children: [
      Button({
        onClick: () => setShowCard(!showCard),
        children: 'Toggle Card'
      }),
      // ✅ Correct: Using Component wrapper ensures hooks work properly
      showCard && UserCard({ userId: 1 })
    ]
  })
})

Styling

All wrapped components support MUI's sx prop for styling:

Button({
  variant: 'contained',
  sx: {
    backgroundColor: 'primary.main',
    '&:hover': {
      backgroundColor: 'primary.dark'
    },
    borderRadius: 2,
    textTransform: 'none'
  },
  children: 'Styled Button'
})

Theme Integration

@meonode/mui components work seamlessly with MUI's theme system:

import { createTheme } from '@mui/material/styles'
import { Button, ThemeProvider } from '@meonode/mui'
import { Node } from '@meonode/ui'

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2'
    }
  }
})

const App = () =>
  ThemeProvide({
    theme,
    children: Button({
      variant: 'contained',
      color: 'primary',
      children: 'Themed Button'
    })
  }).render()

Advanced Usage: createMuiNode

If you need to wrap a custom MUI component not included in the package, use the createMuiNode utility:

import { createMuiNode } from '@meonode/mui'
import { Slider } from '@mui/material'

const MeoSlider = createMuiNode(Slider)

// Now use it like any other MeoNode component
const VolumeControl = () =>
  MeoSlider({
    value: 50,
    onChange: (e, newValue) => console.log(newValue)
  }).render()

Benefits

1. Zero Manual Wrapping: All MUI components are pre-wrapped and ready to use
2. Full Type Safety: TypeScript autocomplete works out of the box
3. Consistent API: Use the same function-based composition across your entire app
4. Complete Coverage: Access to Material-UI core, Lab, and all X packages
5. Framework Agnostic: Works with Next.js, Vite, and any React setup

Resources

• GitHub Repository: github.com/l7aromeo/meonode-mui
• MUI Documentation: mui.com
• Package on npm: @meonode/mui

---

Related FAQ

How do I use existing JSX components or JSX libraries with MeoNode UI?

Wrap third-party React components with Node() (or use pre-wrapped packages like @meonode/mui) and pass props normally.

How does styling work in MeoNode UI?

Use style props and the css prop on MeoNode nodes, and use MUI's sx prop on wrapped MUI components where appropriate.

How does the theming system work?

MeoNode theming is handled by ThemeProvider and token paths, while MUI components can also use MUI theme providers when needed.

More details: /docs/getting-started/faq