mantine-ui（曼廷用户界面）

Mantine UI

React-only component library (120+ components, 70+ hooks). Use for forms, overlays, dates, charts, notifications, and theming. Docs: mantine.dev. Pre-built examples: ui.mantine.dev.

Quick setup (new or existing app)

1. Install core packages

- Required: @mantine/core and @mantine/hooks - Optional by feature: @mantine/form, @mantine/dates, @mantine/notifications, etc. (see reference.md)

1. PostCSS (required for Mantine styles) module.exports = {plugins: {'postcss-preset-mantine': {}, 'postcss-simple-vars': {variables: {'mantine-breakpoint-xs': '36em', 'mantine-breakpoint-sm': '48em', 'mantine-breakpoint-md': '62em', 'mantine-breakpoint-lg': '75em', 'mantine-breakpoint-xl': '88em',},},},};

- Install: postcss, postcss-preset-mantine, postcss-simple-vars (as devDependencies) - Add postcss.config.cjs at project root:

1. Import styles once (e.g. in _app.tsx, main.tsx, or root layout) import '@mantine/core/styles.css'; // Add per-package only if used: '@mantine/dates/styles.css', etc.
2. Wrap app with MantineProvider import {createTheme, MantineProvider} from '@mantine/core'; const theme = createTheme({/* optional overrides */}); export default function App() {return (<MantineProvider theme={theme}> {/* app */} </MantineProvider>);}
3. SSR (Next.js app router, etc.) – avoid hydration flash: add ColorSchemeScript in <head> and spread mantineHtmlProps on <html>: import {ColorSchemeScript, mantineHtmlProps} from '@mantine/core'; <html lang="en" {...mantineHtmlProps}> <head> <ColorSchemeScript /> {/*... */} </head> <body>...</body> </html>

Conventions

• Single MantineProvider at the root; do not nest another MantineProvider unless intentionally overriding theme.
• Component styling: Prefer theme/settings (e.g. createTheme, component props). Use Styles API for targeting internal parts; use responsive styles for breakpoints.
• Polymorphic components: Many components accept a root element via props (e.g. component, renderRoot) – see Polymorphic components.
• Forms: Use @mantine/form with Mantine inputs for validation and state; see Form documentation.
• Extra packages: Install only the packages you use; each may need its own CSS import (e.g. @mantine/dates/styles.css).

Framework notes

• Next.js: Prefer the Next.js guide (app or pages router). Use templates from getting started when starting from scratch.
• Vite: See Vite guide. Do not use Create React App for new projects; Mantine recommends Vite or Next.js.

When in doubt

• Check the component’s page on mantine.dev (e.g. Button, TextInput, Modal).
• For full examples and copy-paste snippets: ui.mantine.dev.
• For package list and CSS imports: reference.md.