MUI#

@palmyralabs/rt-forms-mui — the Material-UI-skinned implementation of the rt-forms component library. Every widget here is a thin wrapper around an MUI primitive, wired into a PalmyraForm’s field manager or a server-backed grid.

Install#

npm install @mui/material @mui/icons-material @mui/x-date-pickers \
            @emotion/react @emotion/styled dayjs \
            @palmyralabs/rt-forms @palmyralabs/rt-forms-mui

Provider wiring#

Wrap your app in an MUI ThemeProvider (with CssBaseline), the LocalizationProvider from @mui/x-date-pickers (required for every date/time widget), and inject your Wire store factory:

import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { StoreFactoryContext } from '@palmyralabs/palmyra-wire';
import AppStoreFactory from './wire/StoreFactory';

const theme = createTheme({ palette: { mode: 'light' } });

createRoot(document.getElementById('root')!).render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <StoreFactoryContext.Provider value={AppStoreFactory}>
        <App />
      </StoreFactoryContext.Provider>
    </LocalizationProvider>
  </ThemeProvider>
);

Differences vs the Mantine package#

• No slider component. MuiSlider.tsx.bak is a disabled backup; MUI currently ships no active slider / range-slider / rating-as-slider widget. The Mantine package has these.
• No tri-state checkbox. Mantine ships MantineTriStateCheckBox (via ext/TriStateCheckBox); the MUI package does not.
• View-mode widgets. MUI has dedicated read-only variants (MuiTextView, MuiDateView, MuiOptionsView, MuiLookupView) for detail screens; Mantine relies on the readOnly prop instead.
• Date stack. Every date/time widget requires @mui/x-date-pickers + LocalizationProvider. Mantine uses @mantine/dates — no extra provider.
• Grid types. PalmyraGridOptions / StaticGridOptions are declared locally in the MUI package’s grid/types.ts (Mantine re-uses the shapes from @palmyralabs/rt-forms). The imports you write differ.