Введение в Mantine и быстрый старт проекта

Ключевые преимущества

1. Стилизация без боли: Mantine использует нативный CSS с CSS-переменными. Вы можете переопределить любой стиль, не борясь с !important. Компоненты поддерживают светлую и темную тему «из коробки».
2. Гибкая настройка: система тем (createTheme) позволяет задать цвета, шрифты, отступы и другие параметры глобально для всего приложения.
3. Отличная производительность: стили компилируются в обычные CSS-файлы и не имеют рантайм-накладных расходов.
4. Богатая экосистема: помимо ядра, есть пакеты для форм (@mantine/form), дат (@mantine/dates), уведомлений (@mantine/notifications) и многое другое.

Самый простой способ начать — использовать официальный шаблон Vite. Он уже содержит все необходимые настройки PostCSS и TypeScript .

Клонируйте репозиторий шаблона:

git clone https://github.com/mantinedev/vite-template my-mantine-app

Перейдите в папку проекта и установите зависимости:

cd my-mantine-app
yarn install  # или npm install

Запустите сервер для разработки:

yarn dev  # или npm run dev

Если вы хотите добавить Mantine в существующий проект или предпочитаете ручную настройку, действуйте согласно инструкции ниже.

Mantine официально рекомендует использовать Vite вместо устаревшего Create React App

npm create vite@latest my-mantine-app -- --template react-ts
cd my-mantine-app

Установите ядро и хуки Mantine — они обязательны для работы.

npm install @mantine/core @mantine/hooks

Также установите инструменты PostCSS для работы с адаптивностью и темами.

npm install -D postcss postcss-preset-mantine postcss-simple-vars

Создайте файл postcss.config.cjs в корне проекта со следующим содержимым:

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',
      },
    },
  },
};

В вашем главном файле (например, src/main.tsx или src/App.tsx) обязательно импортируйте базовые стили. Без них компоненты не будут отображаться корректно.

Пример src/App.tsx:

import '@mantine/core/styles.css';
import { MantineProvider, Button, createTheme } from '@mantine/core';

// Создаем тему (пока пустую, но это основа для кастомизации)
const theme = createTheme({
  // Здесь будем настраивать цвета, шрифты и т.д.
});

function App() {
  return (
    <MantineProvider theme={theme}>
      <Button>Привет, Mantine!</Button>
    </MantineProvider>
  );
}

export default App;

npm run dev

Если вы видите стилизованную кнопку — все работает!

Поздравляю! Вы успешно настроили Mantine. Теперь в вашем распоряжении мощная библиотека компонентов. В следующем уроке мы углубимся в тему и научимся управлять цветовыми схемами, в том числе легко переключаться между светлой и темной темами.

Что должно быть в вашем проекте после этого урока:

1. Работающее приложение на React + Vite
2. Установленные @mantine/core и @mantine/hooks
3. Настроенный PostCSS с postcss-preset-mantine
4. Импортированные стили @mantine/core/styles.css
5. Компонент MantineProvider, оборачивающий приложение
6. На экране отображается любая кнопка Mantine