Mantine Has a Free API — 120+ React Components with Dark Mode Built-In

#react #webdev #typescript #tutorial

Mantine is a React component library with 120+ hooks and components, built-in dark mode, and a form library. Everything you need to build a polished app — out of the box.

Why Mantine?

120+ components — buttons, modals, tables, charts, rich text editor
Hooks library — 60+ hooks for common patterns
Form library — validation, nested forms, list fields
Dark mode — built-in, zero config

Quick Start

npx mantine-app@latest

Components

import { Button, TextInput, Select, Switch, Notification } from '@mantine/core';

function MyForm() {
  return (
    <div>
      <TextInput label="Email" placeholder="your@email.com" required />
      <Select label="Role" data={['Admin', 'User', 'Guest']} />
      <Switch label="Active" />
      <Button variant="filled" color="blue">Submit</Button>
    </div>
  );
}

Forms

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

function LoginForm() {
  const form = useForm({
    initialValues: { email: '', password: '' },
    validate: {
      email: (v) => (/^\S+@\S+$/.test(v) ? null : 'Invalid email'),
      password: (v) => (v.length >= 6 ? null : 'Min 6 chars'),
    },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <TextInput {...form.getInputProps('email')} label="Email" />
      <PasswordInput {...form.getInputProps('password')} label="Password" />
      <Button type="submit">Login</Button>
    </form>
  );
}

Hooks

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

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

Notifications

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

notifications.show({
  title: 'Success',
  message: 'User created!',
  color: 'green',
  autoClose: 3000,
});