@mantine/core

React components library focused on usability, accessibility and developer experience

weekly downloads1.4M

versionv8.3.15

licenseMIT

categoryui-library

componentsdesignfrontendlibrarynextnextjsreactuiui-kit

Overview

@mantine/core is a comprehensive React component library that provides over 100 production-ready UI components ranging from basic inputs and buttons to complex data tables and date pickers. Built with TypeScript and emotion-based CSS-in-JS, it emphasizes accessibility (ARIA compliance), developer experience through consistent APIs, and flexibility via a powerful theming system. The library has gained significant adoption with over 1.3 million weekly downloads.

The package emerged as a modern alternative to earlier component libraries, addressing common pain points like inconsistent APIs, poor accessibility defaults, and difficult customization. It's designed as part of a larger ecosystem that includes @mantine/hooks for state management utilities and @mantine/form for form handling. The library works seamlessly with React 18+ and integrates well with Next.js, Vite, and other modern build tools.

Development teams choose @mantine/core when they need a battle-tested component library that doesn't require extensive customization to look professional. It's particularly popular among startups and mid-sized companies building admin dashboards, SaaS applications, and internal tools where development velocity matters. The library strikes a balance between flexibility and convention, providing sensible defaults while allowing deep customization when needed.

@mantine/core is maintained by an active open-source community and follows semantic versioning with regular releases. The library's architecture separates styling from logic, making components easier to test and customize. While it adds significant bundle size (components are tree-shakeable but the core is substantial), teams accept this tradeoff for the productivity gains and accessibility compliance it provides out of the box.

Quick Start

typescript

import { MantineProvider, Button, TextInput, Stack, Paper, Title, Group, Notification } from '@mantine/core';
import { useForm } from '@mantine/form';
import { useState } from 'react';

function LoginForm() {
  const [submitted, setSubmitted] = useState(false);
  
  const form = useForm({
    initialValues: { email: '', password: '' },
    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
      password: (value) => (value.length >= 6 ? null : 'Password must be at least 6 characters')
    }
  });

  const handleSubmit = (values) => {
    console.log('Form submitted:', values);
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 3000);
  };

  return (
    <MantineProvider>
      <Stack align="center" justify="center" style={{ minHeight: '100vh' }}>
        {submitted && (
          <Notification color="green" onClose={() => setSubmitted(false)}>
            Login successful!
          </Notification>
        )}
        <Paper shadow="md" p="xl" withBorder style={{ width: 400 }}>
          <Title order={2} mb="lg">Sign In</Title>
          <form onSubmit={form.onSubmit(handleSubmit)}>
            <Stack gap="md">
              <TextInput
                label="Email"
                placeholder="your@email.com"
                required
                {...form.getInputProps('email')}
              />
              <TextInput
                label="Password"
                type="password"
                placeholder="Your password"
                required
                {...form.getInputProps('password')}
              />
              <Group justify="space-between" mt="md">
                <Button variant="subtle" size="sm">Forgot password?</Button>
                <Button type="submit">Log in</Button>
              </Group>
            </Stack>
          </form>
        </Paper>
      </Stack>
    </MantineProvider>
  );
}

export default LoginForm;

Use Cases

Admin Dashboards and Back-Office Tools: Build complex data-heavy interfaces quickly using components like Table, Pagination, Select, and DatePicker. The library's consistent design language and built-in dark mode support make it ideal for internal tools where development speed matters more than unique branding.

SaaS Application Interfaces: Create customer-facing features like settings panels, user profiles, and data visualization dashboards. Components like Tabs, Accordion, Modal, and Notifications provide polished UX patterns without custom CSS, while the theming system allows brand customization.

Form-Heavy Applications: Implement complex multi-step forms, survey builders, or configuration wizards using form components (TextInput, Checkbox, Radio, Switch) combined with the Stepper component. Built-in validation states and error messaging reduce boilerplate code.

Rapid Prototyping and MVPs: Quickly validate product ideas by assembling functional interfaces from pre-built components. The library's opinionated defaults mean you can ship working features without design resources, then customize later as the product matures.

Accessible Web Applications: Build applications that meet WCAG compliance requirements without accessibility expertise. Components include proper ARIA attributes, keyboard navigation, and screen reader support by default, reducing the risk of accessibility violations in production.

Pros & Cons

Pros

+Comprehensive component set with consistent APIs reduces decision fatigue and speeds up development significantly
+Strong accessibility foundation with ARIA attributes and keyboard navigation built into all interactive components
+Excellent TypeScript support with well-defined prop types and IDE autocomplete across the entire library
+Powerful theming system with CSS variables allows brand customization without ejecting or fighting the framework
+Active maintenance with frequent updates, extensive documentation, and a large community for troubleshooting

Cons

−Large bundle size impact (300KB+ minified) even with tree-shaking, which may be prohibitive for performance-sensitive applications
−Opinionated styling system based on emotion requires buy-in to CSS-in-JS approach and can conflict with existing styled-components setups
−Customizing components beyond theme tokens often requires understanding internal implementation details and using undocumented props
−Breaking changes between major versions (especially v6 to v7) require significant migration effort for established codebases
−Components follow specific design patterns that may not fit unique brand requirements without extensive style overrides

Install

bash

npm install @mantine/core

bash

pnpm add @mantine/core

bash

bun add @mantine/core

Overview

Quick Start

typescript

import { MantineProvider, Button, TextInput, Stack, Paper, Title, Group, Notification } from '@mantine/core';
import { useForm } from '@mantine/form';
import { useState } from 'react';

function LoginForm() {
  const [submitted, setSubmitted] = useState(false);
  
  const form = useForm({
    initialValues: { email: '', password: '' },
    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
      password: (value) => (value.length >= 6 ? null : 'Password must be at least 6 characters')
    }
  });

  const handleSubmit = (values) => {
    console.log('Form submitted:', values);
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 3000);
  };

  return (
    <MantineProvider>
      <Stack align="center" justify="center" style={{ minHeight: '100vh' }}>
        {submitted && (
          <Notification color="green" onClose={() => setSubmitted(false)}>
            Login successful!
          </Notification>
        )}
        <Paper shadow="md" p="xl" withBorder style={{ width: 400 }}>
          <Title order={2} mb="lg">Sign In</Title>
          <form onSubmit={form.onSubmit(handleSubmit)}>
            <Stack gap="md">
              <TextInput
                label="Email"
                placeholder="your@email.com"
                required
                {...form.getInputProps('email')}
              />
              <TextInput
                label="Password"
                type="password"
                placeholder="Your password"
                required
                {...form.getInputProps('password')}
              />
              <Group justify="space-between" mt="md">
                <Button variant="subtle" size="sm">Forgot password?</Button>
                <Button type="submit">Log in</Button>
              </Group>
            </Stack>
          </form>
        </Paper>
      </Stack>
    </MantineProvider>
  );
}

export default LoginForm;

Use Cases

Pros & Cons

Pros

+Comprehensive component set with consistent APIs reduces decision fatigue and speeds up development significantly
+Strong accessibility foundation with ARIA attributes and keyboard navigation built into all interactive components
+Excellent TypeScript support with well-defined prop types and IDE autocomplete across the entire library
+Powerful theming system with CSS variables allows brand customization without ejecting or fighting the framework
+Active maintenance with frequent updates, extensive documentation, and a large community for troubleshooting

Cons

−Large bundle size impact (300KB+ minified) even with tree-shaking, which may be prohibitive for performance-sensitive applications
−Opinionated styling system based on emotion requires buy-in to CSS-in-JS approach and can conflict with existing styled-components setups
−Customizing components beyond theme tokens often requires understanding internal implementation details and using undocumented props
−Breaking changes between major versions (especially v6 to v7) require significant migration effort for established codebases
−Components follow specific design patterns that may not fit unique brand requirements without extensive style overrides