Usage with preact

You can use Mantine with preact the same way as with react with no extra steps.

Setting up preact project

Use preact-cli to scaffold new project:

npx preact-cli create default mantine-preact

Create preact.config.js to setup aliases for react:

export default {
  webpack(config, env) {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      },
    };

    return config;
  },
};

Install mantine dependencies:

npm install @mantine/core @mantine/hooks react-jss

And start application:

npm run dev

Now you can use all components from @mantine/core and hooks from @mantine/hooks.

Example

• Example preact + mantine application
• Example source code

TypeScript with preact

Unfortunately, we were not able to setup Mantine with TypeScript + preact because of this issue. If you know how to solve it, please create a pull request with addition to this guide.