apps/mantine.dev/src/pages/guides/vite.mdx
import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.Vite);
Follow the Vite getting started guide to create a new Vite application:
<NpmScript yarnScript="yarn create vite" npmScript="npm create vite@latest" />
Install PostCSS plugins and postcss-preset-mantine:
<InstallScript packages="postcss postcss-preset-mantine postcss-simple-vars" dev />
Create a 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',
},
},
},
};
Add styles imports and MantineProvider to your application root component (usually App.tsx):
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';
import { MantineProvider } from '@mantine/core';
export default function App() {
return <MantineProvider></MantineProvider>;
}
All set! Start the development server:
npm run dev