Mantine Has a Free React Component Library — 100+ Accessible Components with Built-In Dark Mode

Why Mantine?

Mantine has 100+ components, 50+ hooks, dark mode, form management, and notifications — all accessible and customizable. No Tailwind needed.

npm install @mantine/core @mantine/hooks

Setup

import { MantineProvider } from '@mantine/core'
import '@mantine/core/styles.css'

function App() {
  return (
    <MantineProvider defaultColorScheme="auto">
      <YourApp />
    </MantineProvider>
  )
}

Components

import { Button, TextInput, Select, Modal, Notification, Table } from '@mantine/core'

function Form() {
  return (
    <>
      <TextInput label="Email" placeholder="[e-mail]" required />
      <Select label="Role" data={['Admin', 'User', 'Guest']} />
      <Button variant="filled" color="blue">Submit</Button>
    </>
  )
}

Form Management

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 ? 'Min 6 characters' : null),
    },
  })

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

Mantine vs shadcn/ui vs MUI

Feature	Mantine	shadcn/ui	MUI
Components	100+	40+	50+
Styling	CSS-in-JS	Tailwind	Emotion
Bundle	Tree-shake	Copy-paste	Heavy
Dark mode	Built-in	Manual	Built-in
Hooks	50+	No	Few

---

Need to extract data from any website at scale? I build custom web scrapers — 77 production scrapers running on Apify Store. Email me at [e-mail] for a tailored solution.