Mantine Has a Free API That Gives You 100+ React Components With Dark Mode Built In

Mantine is a React component library with 100+ components, 50+ hooks, dark mode, and a form library. Everything you need, nothing extra to install.

Quick Start

npm install @mantine/core @mantine/hooks

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

function App() {
  return (
    <MantineProvider>
      <TextInput label="Name" placeholder="Your name" />
      <Select label="Role" data={['Developer', 'Designer', 'PM']} />
      <Button>Submit</Button>
    </MantineProvider>
  )
}

Form Library

import { useForm } from '@mantine/form'

function Demo() {
  const form = useForm({
    initialValues: { email: '', name: '' },
    validate: {
      email: (value) => /^\S+@\S+$/.test(value) ? null : 'Invalid email',
      name: (value) => value.length < 2 ? 'Too short' : null,
    },
  })

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

Hooks (50+)

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

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

Dark Mode

<MantineProvider defaultColorScheme="dark">
  {/* Everything auto-switches to dark mode */}
</MantineProvider>

Mantine vs shadcn/ui vs Chakra

Feature	Mantine	shadcn/ui	Chakra
Components	100+	40+	60+
Hooks	50+	None	Some
Form library	Built-in	None	None
Styling	CSS Modules	Tailwind	Emotion
Dark mode	Built-in	Manual	Built-in
Bundle	Tree-shakeable	Copy-paste	Tree-shakeable

The Bottom Line

Mantine is the most complete React component library. 100+ components, forms, hooks, dark mode — all from one package. If you want batteries-included, this is it.

---

Need to automate data collection or build custom scrapers? Check out my Apify actors for ready-made tools, or email [e-mail] for custom solutions.