Migrating from Mantine to Ninna UI: What You Need to Know

Mantine is an excellent library — around 28K stars, rich features, and a hooks library that's genuinely useful. But if you're standardizing on Tailwind CSS v4, Mantine's CSS Modules approach and MantineProvider don't align. Here's how to migrate.

1. Install Ninna UI

npm install @ninna-ui/core @ninna-ui/primitives @ninna-ui/forms @ninna-ui/layout @ninna-ui/overlays @ninna-ui/navigation @ninna-ui/data-display

2. Replace MantineProvider with CSS

Mantine requires a MantineProvider with a theme object. Ninna UI just needs a CSS import:

// Before (Mantine)
import { MantineProvider } from "@mantine/core";

<MantineProvider theme={{ colorScheme: "light" }}>
  <App />
</MantineProvider>

// After (Ninna UI) — no provider needed
// Just add to your CSS:
// @import "tailwindcss";
// @import "@ninna-ui/core/theme/presets/default.css";

3. Map components

// Mantine
<Button variant="filled" color="blue" size="md">Click</Button>
<TextInput label="Email" placeholder="you@example.com" />
<Modal opened={open} onClose={close} title="Title">Content</Modal>

// Ninna UI
<Button color="primary" size="md">Click</Button>
<Field label="Email"><Input placeholder="you@example.com" /></Field>
<Modal open={open} onOpenChange={setOpen}>
  <Modal.Content>
    <Modal.Header>Title</Modal.Header>
    <Modal.Body>Content</Modal.Body>
  </Modal.Content>
</Modal>

4. Replace style props with Tailwind classes

Mantine components accept style props (p, m, bg, c). With Tailwind v4, use utility classes:

// Mantine
<Box p="md" bg="gray.1">...</Box>

// Ninna UI + Tailwind
<div className="p-4 bg-base-200">...</div>

5. What about Mantine's hooks?

Mantine's hooks package (@mantine/hooks) is separate from the components. If you use useDebouncedValue, useIntersection, useMediaQuery, etc., you can keep @mantine/hooks installed — it works independently. Over time, you may replace them with your own implementations or alternatives.

What you gain

• CSS-first theming — no MantineProvider, no theme object.
• Tailwind v4 native — utility classes instead of style props.
• oklch colors — perceptually uniform palettes.
• Smaller bundle — no CSS Modules runtime.
• Zero hydration mismatches on SSR.

What you give up

Mantine's hooks library is genuinely valuable, and Mantine has some components Ninna UI doesn't (DatePicker, RichTextEditor, Dropzone). If those are critical to your app, consider keeping @mantine/hooks alongside Ninna UI, or check if Ninna UI's blocks hub has a suitable alternative.