Mantine — Fully Featured React Components Library

What it is

Mantine is a fully featured React components library with 120+ customizable components and 70+ hooks. It is TypeScript-first, includes built-in form management, notifications, modals, and a rich text editor. Dark mode works with zero configuration.

Mantine targets React developers who want a batteries-included UI library without the complexity and bundle size of Material UI. MIT licensed with an active maintainer.

How it saves time or tokens

Mantine provides everything a typical web application needs: inputs, buttons, tables, modals, notifications, date pickers, charts, a command palette (Spotlight), and a rich text editor (Tiptap-based). Instead of assembling separate libraries for each feature, you install Mantine and get a consistent design system. The 70+ hooks cover common UI patterns (useDebouncedValue, useLocalStorage, useClipboard, useMediaQuery) that would otherwise require custom code.

How to use

1. Create a new project with Mantine:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm i @mantine/core @mantine/hooks

1. Set up the provider and use components:

import '@mantine/core/styles.css';
import { MantineProvider, Button, TextInput, Stack } from '@mantine/core';

function App() {
  return (
    <MantineProvider defaultColorScheme='auto'>
      <Stack p='xl'>
        <TextInput label='Name' placeholder='John' />
        <Button>Submit</Button>
      </Stack>
    </MantineProvider>
  );
}

1. Add form management:

import { useForm } from '@mantine/form';

const form = useForm({
  initialValues: { email: '', name: '' },
  validate: {
    email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
  },
});

Example

Building a command palette with Mantine Spotlight:

import { Spotlight, SpotlightActionData } from '@mantine/spotlight';

const actions: SpotlightActionData[] = [
  { id: 'home', label: 'Home', description: 'Go to home page' },
  { id: 'dashboard', label: 'Dashboard', description: 'View analytics' },
  { id: 'settings', label: 'Settings', description: 'Manage preferences' },
];

function App() {
  return (
    <Spotlight
      actions={actions}
      searchProps={{ placeholder: 'Search...' }}
      shortcut='mod + K'
    />
  );
}
// Press Cmd+K to open the command palette

Related on TokRepo

• Coding tools — More React frameworks and developer tools on TokRepo.
• Design tools — Browse UI design and component libraries.

Common pitfalls

• Forgetting to import '@mantine/core/styles.css' causes unstyled components. This CSS import is required at the application root.
• Using Mantine components outside MantineProvider breaks theming and dark mode. Wrap your entire app with MantineProvider.
• Installing all Mantine packages at once bloats the bundle. Install only the packages you need (@mantine/core, @mantine/hooks, @mantine/form, etc.).