Chakra UI to Mantine Migration Guide — Component-by-Component

Why Switch from Chakra UI to Mantine?

Chakra UI and Mantine are both beloved React component libraries that prioritize developer experience, but Mantine has rapidly evolved into a more feature-complete ecosystem that many teams are now choosing for new projects and migrations alike. Understanding the differences helps you decide whether a migration is worth the effort for your team.

120+ hooks and utilities. Mantine ships an enormous collection of hooks through its @mantine/hooks package. From useDisclosure and useClipboard to useIntersection and useHotkeys, these hooks cover use cases that would otherwise require third-party packages. Chakra provides fewer built-in hooks, meaning your project accumulates more dependencies over time.

Superior TypeScript developer experience. While Chakra UI offers decent TypeScript support, Mantine was built TypeScript-first from day one. Every component, every prop, and every hook is fully typed with strict generic inference. Auto-completion is more reliable, prop errors are caught earlier, and the overall DX feels significantly more polished when working in VSCode or any TypeScript-aware editor.

More components out of the box.Mantine offers over 100 components compared to Chakra’s roughly 60. This includes complex widgets like DatePicker, RichTextEditor, Spotlight (command palette), Carousel, and Notifications that Chakra does not include. Having these as first-party components means consistent theming, better integration, and fewer compatibility headaches.

CSS Modules over CSS-in-JS. Starting with v7, Mantine moved away from Emotion-based CSS-in-JS to native CSS Modules and PostCSS. This eliminates runtime style injection, improves server-side rendering performance, and produces smaller bundles. Chakra UI still relies on Emotion at runtime, which can cause hydration mismatches and performance overhead in SSR-heavy applications.

Component Mapping: Chakra UI to Mantine

Below is a detailed mapping of the most commonly used Chakra UI components and their Mantine equivalents. Each example shows the Chakra source code on the left and the corresponding Mantine code on the right. You can also use the FrontFamily Converter to automate these transformations instantly.

<Button colorScheme="blue" variant="solid">
  Save Changes
</Button>

<Button color="blue" variant="filled">
  Save Changes
</Button>

<FormControl>
  <FormLabel>Email</FormLabel>
  <Input variant="outline" />
  <FormHelperText>Enter email</FormHelperText>
</FormControl>

<TextInput
  label="Email"
  description="Enter email"
  variant="default"
/>

<Modal isOpen={isOpen} onClose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Confirm</ModalHeader>
    <ModalBody>Are you sure?</ModalBody>
    <ModalFooter>
      <Button onClick={onClose}>Cancel</Button>
    </ModalFooter>
  </ModalContent>
</Modal>

<Modal opened={opened} onClose={close}
  title="Confirm">
  <Text>Are you sure?</Text>
  <Group mt="md" justify="flex-end">
    <Button onClick={close}>Cancel</Button>
  </Group>
</Modal>

<Switch
  isChecked={enabled}
  onChange={handleChange}
  colorScheme="green"
/>

<Switch
  checked={enabled}
  onChange={handleChange}
  color="green"
/>

<Badge colorScheme="green">Active</Badge>
<Badge variant="outline">Draft</Badge>

<Badge color="green">Active</Badge>
<Badge variant="outline">Draft</Badge>

<Avatar src={user.avatar} name={user.name} />
<Avatar name="JD" bg="blue.500" />

<Avatar src={user.avatar} alt={user.name} />
<Avatar color="blue">JD</Avatar>

<Tabs>
  <TabList>
    <Tab>Profile</Tab>
    <Tab>Settings</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Profile content</TabPanel>
    <TabPanel>Settings content</TabPanel>
  </TabPanels>
</Tabs>

<Tabs defaultValue="profile">
  <Tabs.List>
    <Tabs.Tab value="profile">Profile</Tabs.Tab>
    <Tabs.Tab value="settings">Settings</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="profile">Profile content</Tabs.Panel>
  <Tabs.Panel value="settings">Settings content</Tabs.Panel>
</Tabs>

<Select placeholder="Choose role">
  <option value="admin">Admin</option>
  <option value="user">User</option>
</Select>

<Select
  placeholder="Choose role"
  data={[
    { value: 'admin', label: 'Admin' },
    { value: 'user', label: 'User' },
  ]}
/>

<Tooltip label="More info" placement="top">
  <IconButton icon={<InfoIcon />} />
</Tooltip>

<Tooltip label="More info" position="top">
  <ActionIcon><IconInfoCircle /></ActionIcon>
</Tooltip>

<Alert status="warning">
  <AlertIcon />
  <AlertDescription>
    Session expiring soon.
  </AlertDescription>
</Alert>

<Alert
  color="yellow"
  title="Warning"
  icon={<IconAlertTriangle />}>
  Session expiring soon.
</Alert>

Prop Conversion Reference

Migrating from Chakra UI to Mantine involves renaming several commonly used props. Chakra uses a prefix convention (is prefix for booleans, colorScheme for color tokens) while Mantine uses more standard HTML-like prop names. Here are the most common transformations:

Hook Migration: Chakra to Mantine

Both libraries provide utility hooks, but Mantine’s hook library is substantially larger. Here is how the most commonly used Chakra hooks map to their Mantine equivalents, along with hooks that are exclusive to Mantine:

Interactive Component Reference

Search any Chakra UI component to find its Mantine equivalent. Components marked with ⚠ have no direct replacement and require custom implementation.

What Developers Actually Hit

Based on migration reports from engineering teams. These are the problems documentation doesn’t warn you about.

Styling Migration: Style Props to CSS Modules

The biggest paradigm shift. Chakra UI is built entirely around style props: you pass bg, p, mx, and borderRadius directly to components. Mantine v7 moved away from this approach toward CSS Modules and a dedicated style prop. While Mantine still supports some style props like mt and mb on all components, complex styling should be done through CSS Modules or the styles API.

Theme token differences. Chakra uses a numeric spacing scale where 4 maps to 1rem. Mantine uses named tokens: "xs", "sm", "md", "lg", "xl". Colors also differ: blue.500 in Chakra becomes blue.5 in Mantine (0-9 scale instead of 50-900).

Server-side rendering. Because Mantine uses CSS Modules instead of runtime CSS-in-JS, SSR is dramatically simpler. There is no need for Emotion cache configuration, no risk of hydration mismatches from style injection order, and no flash of unstyled content. This makes Mantine a particularly strong choice for Next.js applications where server components are the default.

Import Changes at a Glance

import { Button } from '@chakra-ui/react';
import { Input } from '@chakra-ui/react';
import { Modal, ModalOverlay } from '@chakra-ui/react';
import { useDisclosure } from '@chakra-ui/react';
import { useToast } from '@chakra-ui/react';

import { Button } from '@mantine/core';
import { TextInput } from '@mantine/core';
import { Modal } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { notifications } from '@mantine/notifications';