Skip to main content
New to FormEngine? It’s a React library that renders forms from JSON schemas. FormEngine ships three complete UI component packages, each MIT-licensed and free. This guide helps you pick the right one. Start here →

​
What you’ll learn

  • The differences between the three UI component packages
  • How to choose based on your project needs
  • How to install and get started with each
  • Whether you can switch packages later
  • How the three packages compare in features, component count, and unique capabilities

​
The three options

FormEngine supports three separate UI component libraries. Each is a complete, production-ready package. They’re not themes or skins — they’re three distinct sets of components with different capabilities, different type names, and different peer dependencies.
PackageNPMLicenseVersionComponent CountUnique Strength
RSuite@react-form-builder/components-rsuiteMITLatest~35Multi-step wizard support
Material UI@react-form-builder/components-material-uiMITLatest~27Native MUI design tokens
Mantine@react-form-builder/components-mantineMITLatest~45+Color pickers, ratings, sliders, rich date/time options
All three are completely free. No licensing fees, no restrictions, no seat limits. MIT license means you can use them in commercial projects.

​
Quick decision guide

Answer these questions to find your best fit:

​
“I want the fastest setup”

→ RSuite RSuite is the default choice for new projects. It requires zero configuration, has the most stable API, and the largest community within FormEngine. Install it and start building immediately. 
npm install @react-form-builder/components-rsuite

​
”My project already uses Material UI”

→ Material UI If your React app already imports from @mui/material, choose the Material UI FormEngine package. Components inherit your MUI theme tokens automatically — buttons, inputs, and dialogs match your brand colors and typography without extra configuration. 
npm install @react-form-builder/components-material-ui

​
”I need specialized inputs (colors, ratings, dates)”

→ Mantine Mantine excels at rich form inputs. It’s the only package with built-in color pickers, rating components, slider variations, and 20+ date/time variants (ranges, month pickers, year pickers). If your forms need these, Mantine saves you from building custom components. 
npm install @react-form-builder/components-mantine

​
”I need multi-step wizard forms”

→ RSuite (only option) Only RSuite includes a RsWizard component for step-by-step forms. Material UI and Mantine don’t have built-in wizards, though you can build custom step logic with conditional rendering. 
npm install @react-form-builder/components-rsuite

​
Feature comparison table

FeatureRSuiteMaterial UIMantine
Text inputRsInputMuiTextFieldMtTextInput
Dropdown selectRsDropdownMuiSelectMtSelect
CheckboxRsCheckboxMuiCheckboxMtCheckbox
Radio groupRsRadioGroupMuiRadioGroupMtRadioGroup
TextareaRsTextAreaMuiTextField (multiline)MtTextarea
ButtonRsButtonMuiButtonMtButton
Date pickerRsDatePickerMuiDatePickerMtDatePickerInput, MtDateRangePickerInput, MtMonthPickerInput
Time pickerRsTimePicker❌MtTimePicker, MtTimeInput
Color picker❌❌MtColorInput, MtColorPicker
Rating❌❌MtRating
Switch / ToggleRsToggleMuiSwitchMtSwitch
Stepper / WizardRsWizard❌❌
Card / ContainerRsCard, RsContainerMuiCard, MuiContainerMtContainer
Modal / DialogRsModalLayoutMuiDialogMtDialog
File uploadRsUploaderMuiUploaderMtFileInput
Custom stylingCSS propertiesMUI sx propMantine classNames
Summary:
  • RSuite: 35 components, wizard support, strong form UX
  • Material UI: 27 components, native MUI tokens, aligns with existing MUI projects
  • Mantine: 45+ components, specialty inputs (colors, ratings, rich dates), best for complex forms

​
Installation for each package

​
RSuite

npm install @react-form-builder/components-rsuite rsuite
Then use in your form: 
import { FormViewer } from '@react-form-builder/core';
import { view } from '@react-form-builder/components-rsuite';

export default function MyForm() {
  const schema = JSON.stringify({
    key: 'myForm',
    type: 'Screen',
    children: [
      { key: 'email', type: 'RsInput', props: { label: 'Email' } },
      { key: 'country', type: 'RsDropdown', props: { label: 'Country' } },
      { key: 'subscribe', type: 'RsCheckbox', props: { label: 'Subscribe to newsletter' } },
    ],
  });

  return <FormViewer view={view} form={schema} />;
}

​
Material UI

npm install @react-form-builder/components-material-ui @mui/material @emotion/react @emotion/styled
Then use in your form: 
import { FormViewer } from '@react-form-builder/core';
import { view } from '@react-form-builder/components-material-ui';

export default function MyForm() {
  const schema = JSON.stringify({
    key: 'myForm',
    type: 'Screen',
    children: [
      { key: 'email', type: 'MuiTextField', props: { label: 'Email' } },
      { key: 'country', type: 'MuiSelect', props: { label: 'Country' } },
      { key: 'subscribe', type: 'MuiCheckbox', props: { label: 'Subscribe to newsletter' } },
    ],
  });

  return <FormViewer view={view} form={schema} />;
}
Material UI components automatically pick up your theme. If you’ve configured a custom MUI theme, FormEngine respects it: 
import { createTheme, ThemeProvider } from '@mui/material/styles';

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

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyForm />
    </ThemeProvider>
  );
}

​
Mantine

npm install @react-form-builder/components-mantine @mantine/core @mantine/hooks
Then use in your form: 
import { FormViewer } from '@react-form-builder/core';
import { view } from '@react-form-builder/components-mantine';
import { MantineProvider } from '@mantine/core';

export default function MyForm() {
  const schema = JSON.stringify({
    key: 'myForm',
    type: 'Screen',
    children: [
      { key: 'email', type: 'MtTextInput', props: { label: 'Email' } },
      { key: 'birthColor', type: 'MtColorInput', props: { label: 'Favorite color' } },
      { key: 'rating', type: 'MtRating', props: { label: 'Rate this' } },
    ],
  });

  return (
    <MantineProvider>
      <FormViewer view={view} form={schema} />
    </MantineProvider>
  );
}

​
Can I switch later?

Yes, switching is possible, but requires schema migration. The JSON schema structure stays the same across all three packages — key, props, children, validations, and events work identically. What changes is the type values. Example migration from RSuite to Mantine: 
// RSuite schema
{
  key: 'myForm',
  type: 'Screen',
  children: [
    { key: 'email', type: 'RsInput', props: { label: 'Email' } },
    { key: 'country', type: 'RsDropdown', props: { label: 'Country' } },
  ],
}

// Mantine schema (same structure, different type names)
{
  key: 'myForm',
  type: 'Screen',
  children: [
    { key: 'email', type: 'MtTextInput', props: { label: 'Email' } },
    { key: 'country', type: 'MtSelect', props: { label: 'Country' } },  // SelectPicker → Select
  ],
}

// Everything else stays identical:
// - validations work the same
// - events work the same
// - conditional logic works the same
// - form submission works the same
Cost of switching: You need to update all type values in your schemas. If you have 50 forms, that’s 50 migrations. Consider using a migration script or helper function. Pro tip: If you think you might switch in the future, store form schemas in a database (not hardcoded) so you can update them all at once.

​
Can I use two libraries in one app?

No — one form uses one view package. You can’t mix RSuite and Material UI components in the same form. But you can use different packages for different forms in the same app: 
import { FormViewer } from '@react-form-builder/core';
import { view as rsuiteView } from '@react-form-builder/components-rsuite';
import { view as muiView } from '@react-form-builder/components-material-ui';

export default function App() {
  const rsuiteSchema = JSON.stringify({ /* RSuite types */ });
  const muiSchema = JSON.stringify({ /* MUI types */ });

  return (
    <>
      <FormViewer view={rsuiteView} getForm={() => rsuiteSchema} />
      <FormViewer view={muiView} getForm={() => muiSchema} />
    </>
  );
}
This works, but it’s uncommon. Most projects pick one package and stick with it for consistency.

​
Premium add-on components

FormEngine also offers premium add-on components that work with all three packages:
  • Data Grid — render large datasets in a table with sorting, filtering, pagination
  • Rich Text Editor — WYSIWYG editor for long-form content
  • Signature Pad — capture handwritten signatures
  • QR Code — generate and display QR codes
  • Google Maps — embed maps with address autocomplete
These premium components are the same regardless of which UI package you chose. A Data Grid looks consistent with your RSuite (or MUI, or Mantine) form.

​
Common questions

​
”Which package has the best performance?”

All three have similar performance characteristics. RSuite and Mantine are slightly lighter than Material UI (which has more default styling). For most forms, the difference is negligible.

​
”Can I use my own custom components instead?”

Yes. FormEngine supports custom components. You can mix built-in RSuite components with your own React components in the same form. See Custom Components for details.

​
”What if I need a component that doesn’t exist?”

Build it as a custom component. FormEngine is designed to be extended. Any React component can be wrapped and used in your form JSON schema.

​
”Do the three packages get the same updates?”

Yes. New features, bug fixes, and performance improvements are released across all three packages simultaneously. None is “more maintained” than the others.

​
”Which package works with TypeScript?”

All three. FormEngine is fully typed, and all three packages include TypeScript definitions.

​
”How much do the peer dependencies add to my bundle?”

  • RSuite: ~80 KB (gzip) for rsuite
  • Material UI: ~60 KB (gzip) for @mui/material + emotion
  • Mantine: ~50 KB (gzip) for @mantine/core
These are rough estimates. See Bundle Size Comparison for detailed benchmarks.

​
Decision matrix

Use this matrix to confirm your choice:
If you…Choose
…are building a new project with no existing UI frameworkRSuite
…already use Material UI in your appMaterial UI
…need color pickers, ratings, or advanced date pickersMantine
…need a multi-step wizard formRSuite
…want maximum component count and flexibilityMantine
…want the smallest bundle sizeMaterial UI
…want zero configuration and fast setupRSuite
…need very specific date/time pickers (month, year, range)Mantine

​
Next steps

RSuite Components

Browse all RSuite components, type names, and prop documentation.

Quick Start

Install FormEngine and build your first form in 5 minutes.

Material UI Components

View all Material UI component types and examples.

Mantine Components

Explore all Mantine components including color and date pickers.
Last modified on April 16, 2026