Mantine Has a Free API You've Never Heard Of

Mantine is a React component library with 100+ hooks and components. Unlike most UI libraries, Mantine includes a powerful hooks library, form management, notifications, and rich text editor — all free and fully typed.

What Makes Mantine Special?

• 100+ components — everything from buttons to rich text editors
• 60+ hooks — useLocalStorage, useDebounce, useIntersection, etc.
• Form management — built-in form library with validation
• Notifications — toast notifications included
• Free — MIT license, fully open source

The Hidden API: 60+ Hooks

import { 
  useLocalStorage, useDebounced, useClipboard,
  useIntersection, useMediaQuery, useHotkeys,
  useIdle, useNetwork, useOs, useDocumentTitle
} from '@mantine/hooks';

function App() {
  // Persistent state in localStorage
  const [theme, setTheme] = useLocalStorage({ key: 'theme', defaultValue: 'dark' });

  // Debounced value for search
  const [search, setSearch] = useState('');
  const [debounced] = useDebounced(search, 300);

  // Clipboard
  const clipboard = useClipboard({ timeout: 2000 });

  // Responsive
  const isMobile = useMediaQuery('(max-width: 768px)');

  // Keyboard shortcuts
  useHotkeys([
    ['mod+K', () => openSearch()],
    ['mod+S', () => save()],
    ['Escape', () => close()]
  ]);

  // Idle detection
  const idle = useIdle(300000); // 5 minutes

  // Network status
  const network = useNetwork();

  return <div>{network.online ? 'Online' : 'Offline'}</div>;
}

Form API

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

function SignupForm() {
  const form = useForm({
    initialValues: { name: '', email: '', age: 0 },
    validate: {
      name: (v) => v.length < 2 ? 'Too short' : null,
      email: (v) => /^\S+@\S+$/.test(v) ? null : 'Invalid email',
      age: (v) => v < 18 ? 'Must be 18+' : null
    }
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <TextInput label="Name" {...form.getInputProps('name')} />
      <TextInput label="Email" {...form.getInputProps('email')} />
      <NumberInput label="Age" {...form.getInputProps('age')} />
      <Button type="submit">Submit</Button>
    </form>
  );
}

Quick Start

npm install @mantine/core @mantine/hooks @mantine/form

Why Teams Choose Mantine

A developer shared: "We used Chakra UI + React Hook Form + react-hot-toast + custom hooks. Mantine replaced all four. One library, consistent API, everything works together. Our bundle shrank 30%."

---

Building React UIs? Email [e-mail] or check my tools.

Mantine vs MUI vs Chakra — what's your component library?