# 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 the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## 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 is lighter (bundles are ~30% smaller) and ships hooks/forms/notifications/modals out of the box; MUI has a more mature design system and a bigger ecosystem.

**Q: Is theme customization hard?**
A: Not at all. `createTheme({ primaryColor: "cyan", radius: "md" })` plus CSS variables is all you need. Multi-theme switching is supported.

**Q: Can it be used with Tailwind?**
A: Yes. Mantine uses CSS variables, and Tailwind utilities can be applied alongside them.

## Sources & Credits

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

---
Source: https://tokrepo.com/en/workflows/mantine-fully-featured-react-components-library-ee95461f
Author: Script Depot