Mantine Has a Free React Component Library — Here's How to Use It

#react #ui #components #typescript

Material UI is heavy. Chakra UI is dropping. Mantine is the rising star — 100+ hooks and components, built-in dark mode, CSS modules, and a stellar developer experience.

What Is Mantine?

Mantine is a fully-featured React component library. It includes 100+ components, 50+ hooks, form management, notifications, rich text editor, and more — all with first-class TypeScript support.

Quick Start

npx create-mantine-app@latest my-app

import { Button, TextInput, Stack, Title } from '@mantine/core';

function LoginForm() {
  return (
    <Stack gap="md" maw={400} mx="auto">
      <Title order={2}>Sign In</Title>
      <TextInput label="Email" placeholder="you@example.com" />
      <TextInput label="Password" type="password" />
      <Button fullWidth>Log in</Button>
    </Stack>
  );
}

Component Highlights

Data Table

import { Table, Badge, ActionIcon } from '@mantine/core';

function UserTable({ users }) {
  return (
    <Table striped highlightOnHover>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>Name</Table.Th>
          <Table.Th>Role</Table.Th>
          <Table.Th>Status</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>
        {users.map(user => (
          <Table.Tr key={user.id}>
            <Table.Td>{user.name}</Table.Td>
            <Table.Td>{user.role}</Table.Td>
            <Table.Td>
              <Badge color={user.active ? 'green' : 'gray'}>
                {user.active ? 'Active' : 'Inactive'}
              </Badge>
            </Table.Td>
          </Table.Tr>
        ))}
      </Table.Tbody>
    </Table>
  );
}

Notifications

import { notifications } from '@mantine/notifications';

notifications.show({
  title: 'Success!',
  message: 'Your changes have been saved',
  color: 'green',
  autoClose: 3000,
});

Modals

import { modals } from '@mantine/modals';

modals.openConfirmModal({
  title: 'Delete user?',
  children: <Text>This action cannot be undone.</Text>,
  labels: { confirm: 'Delete', cancel: 'Cancel' },
  confirmProps: { color: 'red' },
  onConfirm: () => deleteUser(id),
});

50+ Hooks

import { useDisclosure, useMediaQuery, useClipboard, useDebouncedValue } from '@mantine/hooks';

const [opened, { open, close }] = useDisclosure(false);
const isMobile = useMediaQuery('(max-width: 768px)');
const clipboard = useClipboard({ timeout: 2000 });
const [debounced] = useDebouncedValue(searchQuery, 300);

Why Mantine

Feature	Mantine	MUI	Chakra UI
Components	100+	70+	60+
Hooks	50+	5	15
Styling	CSS Modules	Emotion	Emotion
Dark mode	Built-in	ThemeProvider	Built-in
Forms	@mantine/form	Manual	Manual
Notifications	Built-in	Snackbar	Toast
Rich text	Built-in	No	No
Bundle size	Moderate	Heavy	Moderate