Skip to main content

Introduction to Mantine

· 2 min read

What is Mantine?

Mantine is a comprehensive React component library designed to help developers build web applications more efficiently. It offers a collection of over 100 customizable components and 50 hooks, covering a wide range of use cases. The library is open-source with an MIT license, making it free to use in any project.

Here are some key features and aspects of Mantine:

  • TypeScript-based: Ensures type safety across all components and hooks.
  • Framework Compatibility: Works with modern frameworks like Next.js, Remix, and others.
  • Dark Theme Support: Easily switch to a dark theme with minimal code.
  • Customization: Components can be customized with props for quick prototyping.
  • Theming: Extend the default theme with additional colors, shadows, radii, spacing, and fonts.
  • Responsive Components: Over 120 responsive components are available, designed for various use cases.
  • Hooks Library: A collection of hooks for managing element size, debouncing value changes, detecting user inactivity, and more.

Getting Started with Mantine

To get started with Mantine in a React project, you would typically install the package via npm or yarn:

npm install @mantine/core @mantine/hooks


yarn add @mantine/core @mantine/hooks

Example Usage

Here's a simple example of using a Mantine button in a React component:

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

function MyApp() {
return <Button color="violet">Click me</Button>;

export default MyApp;

Theming Example

You can customize the theme in Mantine by using the MantineProvider component:

import { MantineProvider } from '@mantine/core';

function App() {
return (
<MantineProvider theme={{ colorScheme: 'dark' }}>
{/* Rest of your application */}

Hooks Example

Using a hook from Mantine to subscribe to element size changes:

import { useElementSize } from '@mantine/hooks';
import { useRef } from 'react';

function MyComponent() {
const { ref, width, height } = useElementSize();

return (
<div ref={ref}>
{/* Your content */}
<div>Width: {width}, Height: {height}</div>

Documentation and Resources

For more detailed information, code examples, and documentation, you can visit the Mantine website.