Usage with Vite
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 ESLint.
If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.
Vite template with full setup: Jest, Storybook, ESLint
Vite template with minimal setup – no additional tools included, only default Vite configuration
Vite template with Vanilla extract example
Follow Vite getting started guide to create new Vite application:
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
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
Install PostCSS plugins and postcss-preset-mantine:
postcss.config.js file at the root of your application with the following content:
Note that if you use Node.js 18+, you will need to replace
module.exports = with
Add styles imports and MantineProvider to your application root component (usually
All set! Start development server: