# Mantine — Fully Featured React Components Library

> Mantine is a modern React components library with 120+ customizable components and 70+ hooks. Dark mode, TypeScript-first, built-in form management, notifications, modals, and rich text editor. The batteries-included alternative to MUI.

## Install

Save as a script file and run:

## Quick Use

```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm i @mantine/core @mantine/hooks @emotion/react
```

```tsx
// main.tsx
import "@mantine/core/styles.css";
import { MantineProvider, Button, TextInput, Stack } from "@mantine/core";

function App() {
  return (
    <MantineProvider defaultColorScheme="auto">
      <Stack p="xl">
        <TextInput label="Name" placeholder="John" />
        <Button>Submit</Button>
      </Stack>
    </MantineProvider>
  );
}
```

## Intro

Mantine is a fully featured React components library with 120+ components and 70+ hooks. Built by Vitaly Rtishchev. Focused on developer experience, accessibility, and zero-config dark mode. The batteries-included alternative to Material UI.

- **Repo**: https://github.com/mantinedev/mantine
- **Stars**: 30K+
- **Language**: TypeScript
- **License**: MIT

## What Mantine Does

- **Core components** — 120+ UI primitives (Button, Input, Modal, Table, Grid)
- **Hooks** — 70+ hooks (useDebouncedValue, useLocalStorage, useClipboard, useMediaQuery)
- **Form management** — `@mantine/form` with validation
- **Notifications** — toast system
- **Modals manager** — imperative modal API
- **Rich Text Editor** — Tiptap-based
- **Date pickers** — full calendar suite
- **Charts** — recharts-based
- **Dark mode** — automatic, zero config
- **Spotlight** — Cmd+K command palette

## Architecture

Components use Emotion CSS-in-JS under the hood (v6 switched from inline to CSS files for SSR perf). Theme provider cascades tokens; `useMantineTheme` reads them anywhere. Fully typed via TypeScript generics.

## Self-Hosting

Client library, ships with your app.

## Key Features

- 120+ components
- 70+ hooks
- First-class dark mode
- Built-in form library
- Notifications system
- Modals manager
- Rich text editor
- Date pickers
- TypeScript-first
- SSR-compatible (Next.js, Remix)

## Comparison

| Library | Components | Styling | Dark Mode | Forms |
|---|---|---|---|---|
| Mantine | 120+ | CSS files | Built-in | Built-in |
| MUI | 100+ | Emotion | Built-in | No |
| Chakra UI | 60+ | Emotion | Built-in | No |
| shadcn/ui | Copy-paste | Tailwind | Built-in | No |
| AntD | 80+ | Less | Built-in | Built-in |

## 常见问题 FAQ

**Q: Mantine vs MUI？**
A: Mantine 更轻（bundle 小 30%）、开箱即用的 hooks/forms/notifications/modals；MUI 设计系统更成熟，生态大。

**Q: 定制主题难吗？**
A: 不难。`createTheme({ primaryColor: "cyan", radius: "md" })` + CSS 变量即可。支持多主题切换。

**Q: 和 Tailwind 能一起用吗？**
A: 能。Mantine 用 CSS 变量，Tailwind utilities 可以同时作用。

## 来源与致谢 Sources

- Docs: https://mantine.dev
- GitHub: https://github.com/mantinedev/mantine
- License: MIT

---
Source: https://tokrepo.com/en/workflows/ee95461f-3577-11f1-9bc6-00163e2b0d79
Author: Script Depot