Usage with TanStack Start

Get started with a template

The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and oxlint.

If you are not familiar with GitHub, you can find detailed instructions on how to bootstrap a project from a template on this page.

mantine-tanstack-start-template

TanStack Start template with full setup: Vitest, oxfmt, Storybook, oxlint

Use template

Generate new application

Follow the TanStack Start quick start guide to create a new TanStack Start application:

npx @tanstack/cli@latest create

Installation

Choose packages that you will use in your application:

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

Install dependencies:

yarn add @mantine/core @mantine/hooks

PostCSS setup

Install PostCSS plugins and postcss-preset-mantine:

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

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

export default {
  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 src/routes/__root.tsx. Import styles with the ?url suffix and add them to the links array of the root route. Mantine styles must be first in the links array, before other styles of your application:

// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import mantineCoreStyles from '@mantine/core/styles.css?url';

import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router';
import { ColorSchemeScript, mantineHtmlProps, MantineProvider } from '@mantine/core';

export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
    links: [{ rel: 'stylesheet', href: mantineCoreStyles }],
  }),
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" {...mantineHtmlProps}>
      <head>
        <ColorSchemeScript />
        <HeadContent />
      </head>
      <body>
        <MantineProvider>{children}</MantineProvider>
        <Scripts />
      </body>
    </html>
  );
}

All set! Start the development server:

npm run dev

Usage with React Router

Usage with Storybook