Integrating Mantine with Buttondown

Integrating Mantine with Buttondown

Add a subscription form to your Mantine application using Buttondown's API.

Mantine is a React component library that lets you build web applications. You can add a subscription form to your newsletter to your Mantine application.

Getting started

To use the examples below, you'll need to install @mantine/core and @mantine/form:

pnpm install @mantine/core @mantine/form

You'll notice two things:

  1. We use "Uncontrolled mode" when building this form. This means that rather than storing form state within React proper, we manage state in a ref for performance reasons. This is not the biggest deal in the world either way, since this form is small, but it's still better.
  2. We do use mantine's built-in form validations, but Buttondown also has its own suite of validations that we use to ensure all incoming subscribers are valid.

Basic example

You can find a complete example in our examples repository.

Use Mantine with Buttondown

You may also be interested in:



Alpine.js

Use Buttondown's Alpine.js integration to build newsletter subscription forms that integrate seamlessly with Buttondown.](/content/features/integrations/alpinejs/index.html)

daisyUI

Build a newsletter subscription form with daisyUI and Tailwind CSS.](/content/features/integrations/daisyui/index.html)

shadcn/ui

Build a newsletter subscription form with shadcn/ui components.](/content/features/integrations/shadcn-ui/index.html)