Refine's Mantine integration only supports Mantine v5. This template build on top of Mantine v7 + Vite template, adding:
- Headless Refine v4 integration (based on this tutorial).
- TailwindCSS v4.
- Sample resources of
blog-postandcategory. - i18n.
- Notification provider.
Dockerfileto deploy via Nginx.
This template comes with the following features:
- PostCSS with mantine-postcss-preset
- TypeScript
- Storybook
- Vitest setup with React Testing Library
- ESLint setup with eslint-config-mantine
dev– start development serverbuild– build production version of the apppreview– locally preview production build
typecheck– checks TypeScript typeslint– runs ESLintprettier:check– checks files with Prettiervitest– runs vitest testsvitest:watch– starts vitest watchtest– runsvitest,prettier:check,lintandtypecheckscripts
up:mantine– upgrade Mantine's packagesup:refine– upgrade Refine's packagesstorybook– starts storybook dev serverstorybook:build– build production storybook bundle tostorybook-staticprettier:write– formats all files with Prettier
Mantine@7 offers several approaches of theming and styling. Learn here.
Mantine@7 also offers a system of CSS variables that you can use them in your stylesheets. To get CSS variables autocomplete and PostCSS support, follow here to set up your VS Code.
Last but not least, you have full power of TailwindCSS v4 with dark mode support out of the box.
Favicon and markup for favicon are generated by favicon-generator. To tweak your own image, generate and replace those files:
public/android-icon-36x36.png
public/android-icon-48x48.png
public/android-icon-72x72.png
public/android-icon-96x96.png
public/android-icon-144x144.png
public/android-icon-192x192.png
public/apple-icon-57x57.png
public/apple-icon-60x60.png
public/apple-icon-72x72.png
public/apple-icon-76x76.png
public/apple-icon-114x114.png
public/apple-icon-120x120.png
public/apple-icon-144x144.png
public/apple-icon-152x152.png
public/apple-icon-180x180.png
public/apple-icon-precomposed.png
public/apple-icon.png
public/browserconfig.xml
public/favicon-16x16.png
public/favicon-32x32.png
public/favicon-96x96.png
public/favicon.ico
public/manifest.json
public/ms-icon-70x70.png
public/ms-icon-144x144.png
public/ms-icon-150x150.png
public/ms-icon-310x310.pngMantine v7 is leaner, faster, and more focused than ever — dropping CSS-in-JS and encouraging a simpler styling approach. It gives you logic-rich, accessible components out of the box, and a solid theme system to build on.
But for many developers, that’s only half the picture.
TailwindCSS fills the gap with lightning-fast layout, responsive utilities, gradients, motion, and fine-grained visual control — all without leaving your markup.
Instead of competing, Mantine and Tailwind complement each other beautifully:
- Use Mantine for structure, accessibility, and interactive components.
- Use TailwindCSS for layout, styling, and animation.
- And optionally, reach for motion plugins like
tailwindcss-motionto enhance UI transitions — noTransitioncomponents or CSS keyframes required.
The result? A frontend stack that feels composable, expressive, and fast to work with.
| Use Case | Best Tool |
|---|---|
| Complex components (modal, popover, drawer) | Mantine |
| Layout, grid, spacing, flex | Tailwind |
| Fast prototyping or tweaking spacing | Tailwind |
| Form handling & validation | Mantine |
| Typography, hover states, gradients | Tailwind |
| Transitions and motion | Tailwind (with plugins) |
| Marketing pages, hero sections, UI blocks | Tailwind UI Libraries (e.g. Preline, HyperUI, Sailboat), ui.mantine.dev |
| Dashboards & scaffolding layouts | Tailwind UI Libraries (e.g. Meraki, Flowbite, Flyon), ui.mantine.dev |
| Feature | Mantine v7 | TailwindCSS |
|---|---|---|
| Horizontal layout | <Group /> |
flex items-center space-x-2 |
| Vertical stack | <Stack /> |
flex flex-col space-y-4 |
| Responsive layout | Manual media queries in CSS | sm:, md:, lg: responsive prefixes |
| Custom spacing | Theme-based spacing tokens | p-4, gap-6, m-2 directly in JSX |
| Grid system | <Grid />, <Col /> |
grid grid-cols-3 gap-4 |
💡 For layout + spacing, Tailwind is faster and more expressive — especially for prototyping.
| Feature | Mantine v7 | TailwindCSS |
|---|---|---|
Headings (<Title />) |
Props like order={2} |
text-2xl font-bold |
Body text (<Text />) |
Theme-based tokens | text-base text-gray-700 |
| Longform / markdown content | TypographyStylesProvider |
@tailwind/typography → prose classes |
🧠 Tailwind gives you atomic control, Mantine gives you semantic abstraction — mix as needed.
| Feature | Mantine v7 | TailwindCSS |
|---|---|---|
| Gradient backgrounds | style={{ backgroundImage: ... }} |
bg-gradient-to-r from-pink-500 to-purple-500 |
| Gradient text | <Text variant="gradient" /> |
bg-clip-text text-transparent |
| Hover/focus states | Use classNames + custom CSS |
hover:bg-blue-600 focus:ring |
| Rounded corners | radius="md" or CSS Modules |
rounded-md, rounded-full |
| Shadow/elevation | Props or CSS Modules | shadow, shadow-lg, drop-shadow-sm |
🎯 Tailwind gives you instant visual feedback, Mantine gives you theme safety.
| Feature | Mantine v7 | TailwindCSS |
|---|---|---|
| Breakpoints | theme.breakpoints.md, etc. |
sm:, md:, lg: utilities |
| Responsive spacing | Requires manual CSS | p-4 md:p-8 lg:p-12 |
| Show/hide on screen sizes | Requires logic or MediaQuery |
hidden md:block, lg:flex |
| Adaptive typography | Manual overrides | text-sm md:text-base lg:text-lg |
⚡ Tailwind makes responsiveness a breeze — especially when you don’t want to open a CSS file.
| Feature | Mantine v7 | Tailwind + Plugins |
|---|---|---|
| Basic transitions | <Transition />, <Collapse /> |
transition, duration-300, ease-in-out |
| Preset animations | N/A (manual setup) | tailwindcss-animate, tailwindcss-motion |
🌀 With motion plugins, Tailwind gives you drop-in animation — no JS required.
When it comes to layout, dashboards, and presentational UI, Tailwind’s ecosystem delivers fast, composable building blocks. Here are some free or freemium Tailwind UI libraries offering ready-to-use components:
| Library | What You Get |
|---|---|
| Preline UI | Layouts, navbars, modals, responsive grids |
| HyperUI | E-commerce, auth pages, clean sections |
| Meraki UI | Dashboards, cards, headers, dark mode support |
| Flowbite | Rich component set with optional JS (e.g. tabs) |
| Flyon UI | Clean components with minimalist design |
| Sailboat UI | Buttons, forms, cards, alerts — copy and paste |