Mantine integration - FormEngine

FormEngine is a React library that renders forms from JSON schemas. The @react-form-builder/components-mantine package provides a free, MIT-licensed component set built on Mantine. It is the richest of the three FormEngine component sets — 45+ components including color pickers, ratings, range sliders, chip groups, a JSON editor, and 20+ date/time picker variants.

FormEngine ships three independent component sets — Mantine, Material UI, and React Suite. A single form uses one set at a time. See the Components Library overview for a side-by-side comparison.

Installation

npm install @react-form-builder/components-mantine
npm install @mantine/core @mantine/dates
# Optional:
# npm install @mantine/dropzone @mantine/tiptap

Mantine ships CSS as plain files that must be imported manually — unlike React Suite, there is no withCssLoader helper. Add the imports to your app entry:

Mantine CSS imports (app entry)

import '@mantine/core/styles.css'
import '@mantine/dates/styles.css'
// Optional:
// import '@mantine/dropzone/styles.css'
// import '@mantine/tiptap/styles.css'

Basic setup

Wrap your app with MantineProvider and pass the Mantine component set to FormViewer:

import {FormViewer} from '@react-form-builder/core'
import {MantineComponents} from '@react-form-builder/components-mantine'
import {MantineProvider} from '@mantine/core'

const view = FormViewer.view(MantineComponents).build()

export const App = () => (
  <MantineProvider>
    <FormViewer view={view} formJson={formJson} />
  </MantineProvider>
)

Use Mantine component types in your JSON — MtTextInput, MtSelect, MtCheckbox, and so on. See the full list below.

Theming

Mantine default color palettes (gray, grape, blue, and others) follow the Open Color scale in the default theme. Pass a theme object to MantineProvider to customize colors, fonts, and radii:

import {createTheme, MantineProvider} from '@mantine/core'

const theme = createTheme({
  fontFamily: 'Open Sans, sans-serif',
  primaryColor: 'cyan',
  defaultRadius: 'md'
})

export const App = () => (
  <MantineProvider theme={theme}>
    <FormViewer view={view} formJson={formJson} />
  </MantineProvider>
)

For theme and provider options, see:

Light and dark color scheme

MantineProvider is the central manager for color scheme. It handles light / dark / auto through defaultColorScheme, persists the selected value through a colorSchemeManager, and applies the resolved mode via the data-mantine-color-scheme attribute used by component styles.

Color scheme with system preference and persistence

import {MantineProvider, localStorageColorSchemeManager} from '@mantine/core'
import {useColorScheme} from '@mantine/hooks'

const colorSchemeManager = localStorageColorSchemeManager({
  key: 'app-color-scheme'
})

export const App = () => {
  const systemColorScheme = useColorScheme()

  return (
    <MantineProvider
      colorSchemeManager={colorSchemeManager}
      defaultColorScheme={systemColorScheme === 'dark' ? 'dark' : 'light'}
      // Uncomment to lock one mode:
      // forceColorScheme='dark'
    >
      <FormViewer view={view} formJson={formJson} />
    </MantineProvider>
  )
}

For client-side-only detection (non-SSR), pass getInitialValueInEffect: true to useColorScheme. For color scheme APIs, see:

BiDi and RTL support

Mantine supports right-to-left layouts in several ways. The simplest is to wrap the app with DirectionProvider:

DirectionProvider with MantineProvider

import {DirectionProvider, MantineProvider} from '@mantine/core'

export const App = () => (
  <DirectionProvider initialDirection="ltr">
    <MantineProvider>
      <FormViewer view={view} formJson={formJson} />
    </MantineProvider>
  </DirectionProvider>
)

You can also set dir="rtl" on the root <html> element, switch direction at runtime with the useDirection hook, or add RTL-specific CSS overrides using the rtl mixin from postcss-preset-mantine. See RTL direction for the full setup.

Available components

Each row links to the FormEngine component reference and to the corresponding Mantine documentation.

Input components

Component	Description	Mantine docs
MtTextInput	Single-line text input	TextInput
MtTextarea	Multi-line text input	Textarea
MtNumberInput	Numeric input with stepper	NumberInput
MtPasswordInput	Password input with visibility toggle	PasswordInput
MtCheckbox	Single checkbox	Checkbox
MtCheckboxGroup	Group of checkboxes	Checkbox.Group
MtRadio	Single radio option	Radio
MtRadioGroup	Radio button group	Radio.Group
MtSwitch	Toggle switch	Switch
MtSwitchGroup	Group of switches	Switch.Group
MtFileInput	File input	FileInput
MtJsonInput	JSON editor input	JsonInput
MtLabel	Label for form controls	Input label

Specialized inputs

Components unique to the Mantine set, not available in RSuite or Material UI:

Component	Description	Mantine docs
MtColorInput	Color picker input	ColorInput
MtColorPicker	Color picker with swatches	ColorPicker
MtRating	Star or custom-symbol rating	Rating
MtSlider	Slider for a single value	Slider
MtRangeSlider	Slider for a value range	RangeSlider
MtSegmentedControl	Segmented control for exclusive options	SegmentedControl
MtChip	Chip for tags or filters	Chip
MtChipCheckboxGroup	Chip-based checkbox group	Chip
MtChipRadioGroup	Chip-based radio group	Chip

Select and combobox

Component	Description	Mantine docs
MtSelect	Single-value dropdown	Select
MtMultiSelect	Multi-value dropdown	MultiSelect
MtNativeSelect	Native HTML `<select>` styled with Mantine	NativeSelect
MtAutocomplete	Autocomplete with suggestions	Autocomplete
MtTagsInput	Free-form tag entry	TagsInput

Date and time

Require @mantine/dates:

Component	Description	Mantine docs
MtDatePicker	Single-date picker	DatePicker
MtDatePickerInput	Single-date picker with input	DatePickerInput
MtDateRangePicker	Date range picker	DatePicker
MtDateRangePickerInput	Date range picker with input	DatePickerInput
MtDateMultiplePicker	Multiple-dates picker	DatePicker
MtDateMultiplePickerInput	Multiple-dates picker with input	DatePickerInput
MtDateTimePicker	Date + time picker	DateTimePicker
MtMonthPicker	Single-month picker	MonthPicker
MtMonthPickerInput	Single-month picker with input	MonthPickerInput
MtMonthRangePicker	Month range picker	MonthPicker
MtMonthRangePickerInput	Month range picker with input	MonthPickerInput
MtMonthMultiplePicker	Multiple-months picker	MonthPicker
MtMonthMultiplePickerInput	Multiple-months picker with input	MonthPickerInput
MtYearPicker	Single-year picker	YearPicker
MtYearPickerInput	Single-year picker with input	YearPickerInput
MtYearRangePicker	Year range picker	YearPicker
MtYearRangePickerInput	Year range picker with input	YearPickerInput
MtYearMultiplePicker	Multiple-years picker	YearPicker
MtYearMultiplePickerInput	Multiple-years picker with input	YearPickerInput
MtTimePicker	Time picker	TimePicker
MtTimeInput	Time input field	TimeInput
MtTimeGrid	Time slot grid for scheduling	TimeGrid

Layout and typography

Component	Description	Mantine docs
MtContainer	Container for centering and constraining content	Container
MtDivider	Visual divider	Divider
MtText	Text component for body content	Text
MtTitle	Heading component	Title
MtTypography	Typography with preset text styles	TypographyStylesProvider

Overlays and feedback

Component	Description	Mantine docs
MtTooltip	Tooltip for additional information	Tooltip
MtDialog	Modal dialog container	Modal
MtErrorWrapper	Error display wrapper	Custom FormEngine component

Buttons

Component	Description	Mantine docs
MtButton	Button for user actions	Button

Optional extensions

Require additional Mantine packages:

Component	Description	Mantine docs
MtDropzone	File upload dropzone	Dropzone (requires `@mantine/dropzone`)
MtTiptap	Rich text editor	Tiptap (requires `@mantine/tiptap`)

Additional resources

Support

For issues with the Mantine integration, contact support@optimajet.com or open a ticket on the FormEngine GitHub issues page.

Next steps

Mantine components reference — Full reference for every Mantine component, with props and examples
Components Library overview — Compare the Mantine, Material UI, and RSuite component sets side by side
Integrations overview — Explore other framework and UI integrations

​Installation

​Basic setup

​Theming

​Light and dark color scheme

​BiDi and RTL support

​Available components

​Input components

​Specialized inputs

​Select and combobox

​Date and time

​Layout and typography

​Overlays and feedback

​Buttons

​Optional extensions

​Additional resources

​Support

​Next steps

Installation

Basic setup

Theming

Light and dark color scheme

BiDi and RTL support

Available components

Input components

Specialized inputs

Select and combobox

Date and time

Layout and typography

Overlays and feedback

Buttons

Optional extensions

Additional resources

Support

Next steps