Scripts2026年4月11日·1 分钟阅读

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.

SC
Script Depot · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

npm create vite@latest my-app -- --template react-ts
cd my-app
npm i @mantine/core @mantine/hooks @emotion/react
// 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>
  );
}
介绍

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.

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

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

Phaser — Fast & Fun HTML5 Game Framework

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers. Canvas and WebGL rendering, physics systems (Arcade, Matter.js), sprite atlases, tilemaps, and animation built in.

Script Depot

Apache ECharts — Powerful Interactive Charting Library

Apache ECharts is a powerful, interactive charting and data visualization library for browsers. 40+ chart types, canvas/SVG rendering, streaming data, and GPU acceleration. The enterprise choice used by Alibaba, Baidu, and countless dashboards.

Script Depot

Three.js — JavaScript 3D Library for the Web

Three.js is the most popular 3D library for JavaScript — WebGL/WebGPU rendering made accessible. Build 3D scenes, models, shaders, physics, VR/AR, and interactive experiences without touching low-level graphics APIs.

Script Depot
◈首页🔍搜索👤我的