rhf-zod-mantine-typescript-template

rhf-zod-mantine-typescript-template is a Next.js starter that wires Mantine UI components to React Hook Form and Zod validation through a custom useForm wrapper and a <FormController /> component.

What is rhf-zod-mantine-typescript-template?

This open-source project extends the mantine-next-template by integrating React Hook Form for form state and Zod for schema validation. It runs on Next.js with TypeScript and provides a custom useForm hook that wraps React Hook Form's useForm API, plus a Form component that renders fields automatically from a controllers configuration. The resulting forms are fully typed, with validation errors derived from the Zod schema. The repository is maintained by Rayologist and accepts issues or questions by email.

Key Features

• Custom useForm hook — wraps React Hook Form's useForm so a form is configured declaratively with defaultValues, a Zod schema, onSubmit/onSubmitError handlers, and a controllers object defining each field.
• <FormController /> integration — Mantine's input components are controlled seamlessly; the template ships a working example in src/containers/Form.tsx.
• Type-safe validation — Zod schemas are inferred to TypeScript types using z.infer, so form values and controller configs stay in sync with validation rules.
• 13 supported Mantine components — Checkbox, Checkbox Group, File Input, MultiSelect, Number Input, Password Input, Radio Group, Select, Text Area, Text Input, Date Input, Switch Group, and Pin Input.
• Responsive grid layouts — each field is automatically wrapped in a Grid.Col, with a col prop for per-field column span and multi-column layouts.
• Group orientation control — Checkbox, Radio, and Switch groups accept a horizontal/vertical orientation prop plus orientationProps for fine-grained layout.
• Field render customization — each controller can define a Field function that wraps the default field component, for example adding a "Forgot password?" link alongside the checkbox.

Who is it for?

• Next.js developers who want to build typed forms without writing controlled component boilerplate for each Mantine input.
• Frontend teams standardizing on Mantine who need a consistent form pattern across sign-up, login, checkout, and settings pages.
• Developers who prefer configuration-driven forms — defining fields declaratively in a controllers object rather than hand-writing JSX for each field.

What can you do with it?

• Build a login or registration form with email/password fields and Zod validation in a few lines of configuration.
• Create responsive multi-column forms such as a billing address form using the per-field col prop to control grid spans.
• Customize individual field layouts via the Field render prop, e.g. placing a "Remember me" checkbox next to a "Forgot password?" anchor on the same row.
• Place the submit button outside the form element by calling React's useId() and passing the generated id to both Form and the button's form attribute.

How does the template work?

Start by installing dependencies and running pnpm dev, npm run dev, or yarn dev on port 3000. You define a Zod schema and infer its TypeScript type, then call useForm with defaultValues, schema, onSubmit, and controllers describing each field's Mantine control and props. The Form component renders all fields and handles validation and submission through React Hook Form.

FAQ

Is rhf-zod-mantine-typescript-template free?

Yes — it is a public GitHub repository, so you can clone, modify, and use it in your own projects without cost.

What does the custom useForm hook do?

It wraps React Hook Form's useForm with a higher-level API that accepts a Zod schema, default values, submit/error handlers, and a controllers object. This removes most of the wiring needed to connect Mantine inputs to React Hook Form.

Which Mantine components are already integrated?

The template supports Checkbox, Checkbox Group, File Input, MultiSelect, Number Input, Password Input, Radio Group, Select, Text Area, Text Input, Date Input, Switch Group, and Pin Input.

How do I place the submit button outside the form?

Generate a unique id with React's useId(), pass it to the <Form> component, and set the same value on the button's form attribute. This lets the button live anywhere in the page while still submitting the form.

Does the template keep my form values and validation in sync?

Yes, because the Zod schema is reused as the single source of truth: z.infer produces the TypeScript type for the form values, and the schema is passed to React Hook Form for validation.