Integrations
Mantine
Use Form Wire with Mantine components
The @form-wire/mantine package provides a ready-made mantineMapper and createMantineMapper for overriding individual Mantine components.
Installation
bun add @form-wire/mantine @mantine/core @mantine/hooksImport Mantine styles once in your app:
import "@mantine/core/styles.css";Usage
"use client";
import { MantineProvider } from "@mantine/core";
import { mantineMapper } from "@form-wire/mantine";
import { FormWireProvider } from "@form-wire/react";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<MantineProvider>
<FormWireProvider mapper={mantineMapper}>{children}</FormWireProvider>
</MantineProvider>
);
}You can also scope it to one generated form:
<Contact.Form mapper={mantineMapper} action={submitContact} />Component Overrides
import { TextInput } from "@mantine/core";
import { createMantineMapper, type MantineTextInputProps } from "@form-wire/mantine";
function AppTextInput(props: MantineTextInputProps) {
return <TextInput radius="md" {...props} />;
}
export const mapper = createMantineMapper({
TextInput: AppTextInput,
});Mapped Components
| Form Wire key | Mantine component |
|---|---|
string | TextInput, or Textarea for multiline fields |
boolean | Checkbox |
select | Select |
file | FileInput |
field | Stack and Text |
group | Fieldset |
submit | Button |
status | Skeleton |
message | Alert |
The exported prop types are derived from Mantine with ComponentProps<typeof MantineComponent>.