Usage with create-react-app

Get started with template

The easiest way to get started is to use the template on GitHub:

  1. Open template page on GitHub
  2. Click Use this template button
  3. Clone or download the repository
  4. Install dependencies: yarn
  5. Start development server: npm start

Generate new application

Init new application:

npx create-react-app my-mantine-app --template typescript
Choose packages that you will use in your application:
Hooks for state and UI management
Core components library: inputs, buttons, overlays, etc.
Form management library
Date inputs, calendars
Notifications system
Code highlight with your theme colors and styles
Rich text editor based on Tiptap
Capture files with drag and drop
Embla based carousel component
Overlay command center
Centralized modals manager
Navigation progress
Install dependencies:
yarn add @mantine/core @mantine/hooks @emotion/react
npm install @mantine/core @mantine/hooks @emotion/react

Replace App.tsx with:

import { MantineProvider, Text } from '@mantine/core';
export default function App() {
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<Text>Welcome to Mantine!</Text>

All set! Start development server:

npm start

Next steps