Usage with React Router

Generate new application

Follow React Router getting started guide guide to create new React Router application:

npx create-react-router@latest my-react-router-app

Installation

Choose packages that you will use in your application:

	Package	Description
	`@thinker-core/mantine-hooks`	Hooks for state and UI management
	`@thinker-core/mantine-core`	Core components library: inputs, buttons, overlays, etc.
	`@thinker-core/mantine-form`	Form management library
	`@thinker-core/mantine-dates`	Date inputs, calendars
	`@thinker-core/mantine-charts`	Recharts based charts library
	`@thinker-core/mantine-notifications`	Notifications system
	`@thinker-core/mantine-code-highlight`	Code highlight with your theme colors and styles
	`@thinker-core/mantine-tiptap`	Rich text editor based on Tiptap
	`@thinker-core/mantine-dropzone`	Capture files with drag and drop
	`@thinker-core/mantine-carousel`	Embla based carousel component
	`@thinker-core/mantine-spotlight`	Overlay command center
	`@thinker-core/mantine-modals`	Centralized modals manager
	`@thinker-core/mantine-nprogress`	Navigation progress
	`@thinker-core/mantine-icons`	Icons for Thinker

Add @thinker-core registry to your .npmrc file:

echo @thinker-core:registry=https://repo.blockfint.com/api/v4/projects/1449/packages/npm/ >> .npmrc

Install dependencies:

yarn add @thinker-core/mantine-core @thinker-core/mantine-hooks

PostCSS setup

Install PostCSS plugins and postcss-preset-mantine:

yarn add --dev postcss postcss-preset-mantine postcss-simple-vars

Create postcss.config.cjs file at the root of your application with the following content:

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

Setup

Add styles imports, MantineProvider and ColorSchemeScript to app/root.tsx:

// Import styles of packages that you've installed.
// All packages except `@thinker-core/mantine-hooks` require styles imports
import '@thinker-core/mantine-core/styles.css';

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "react-router";
import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@thinker-core/mantine-core';

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" {...mantineHtmlProps}>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <ColorSchemeScript />
        <Meta />
        <Links />
      </head>
      <body>
        <MantineProvider>{children}</MantineProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

// ... other app/root.tsx content

All set! Start development server:

npm run dev

Usage with Vite

Usage with Gatsby