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

or

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 */}
    </MantineProvider>
  );
}

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>
    </div>
  );
}

Documentation and Resources​

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