Mantine

Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

Features

Mantine packages

Getting started

Mantine works out of the box with create-react-app (including TypeScript version), Preact cli (with compat), Next.js, Gatsby and any other environment.

Install mantine dependencies with yarn:

yarn add react-jss @mantine/hooks @mantine/core

or npm

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

And you are ready:

import React from 'react';
import { Button } from '@mantine/core';

function App() {
  return <Button>My mantine button</Button>;
}

To enable server side rendering in your application see ssr guide, it includes tutorials for Gatsby, Next.js and your own server.

Versioning

All mantine packages are released at the same time with exact same version. After installation you can fix @mantine/scoped packages version in your package.json to prevent versions mismatch in future:

{
  // Fix version by using "1.0.1", not default "^1.0.1"
  "dependencies": {
    "@mantine/core": "1.0.1",
    "@mantine/hooks": "1.0.1"
  }
}