Mantine

Language: JavaScript

UI Framework

Mantine was created by Vitaly Rtishchev in 2021 to deliver a React component library with a strong focus on accessibility, customization, and developer productivity. It combines a large set of ready-to-use components with useful hooks, making it a versatile toolkit for building modern applications.

Mantine is a modern React component library that provides over 100 fully featured components and hooks. It supports server-side rendering, dark theme, accessibility, and offers an extensive set of form and data display components.

Installation

npm: npm install @mantine/core @mantine/hooks

yarn: yarn add @mantine/core @mantine/hooks

cdn: Mantine does not provide an official CDN build; install via npm or yarn.

manual: Install Mantine packages from npm and import components as needed.

Usage

Mantine provides components for inputs, navigation, overlays, typography, and data display. It also includes hooks for state management, responsiveness, and user interactions.

Button usage

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

function Demo() {
  return <Button>Hello Mantine</Button>;
}

Renders a simple button component with Mantine’s default styling.

TextInput

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

<TextInput label="Email" placeholder="your@email.com" />

Creates a text input field with a label and placeholder.

Modal component

import { useState } from 'react';
import { Modal, Button } from '@mantine/core';

function Demo() {
  const [opened, setOpened] = useState(false);
  return (
    <>
      <Modal opened={opened} onClose={() => setOpened(false)} title="Mantine Modal">
        Modal content goes here
      </Modal>
      <Button onClick={() => setOpened(true)}>Open Modal</Button>
    </>
  );
}

Demonstrates usage of Mantine’s Modal with state management.

Tabs

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

<Tabs defaultValue="first">
  <Tabs.List>
    <Tabs.Tab value="first">First tab</Tabs.Tab>
    <Tabs.Tab value="second">Second tab</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="first">First panel</Tabs.Panel>
  <Tabs.Panel value="second">Second panel</Tabs.Panel>
</Tabs>

Creates an accessible tabbed interface using Mantine Tabs.

Responsive Grid

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

<Grid>
  <Grid.Col span={6}>Column 1</Grid.Col>
  <Grid.Col span={6}>Column 2</Grid.Col>
</Grid>

Implements a responsive two-column layout using Mantine Grid.

Error Handling

Styles not applied: Ensure you have wrapped your app with `<MantineProvider>` and imported Mantine styles if necessary.

Component not rendering: Check that the correct package (`@mantine/core` or `@mantine/hooks`) is installed and imported.

SSR hydration mismatch: Use Mantine’s SSR setup guides when working with Next.js or Remix.

Best Practices

Wrap your application in MantineProvider to configure themes and global styles.

Use Mantine hooks like `useDisclosure` and `useForm` to simplify state management.

Take advantage of Mantine’s color schemes and dark mode support for better UX.

Use Mantine’s Grid and Flex components for consistent layouts.

Prefer Mantine’s built-in accessibility features instead of manually handling ARIA roles.

Official Docs Github