chore: migrate to mantine v9

Followed the migration guide

apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx

@@ -23,6 +23,7 @@ export const CustomMantineProvider = ({
         theme={createTheme({
           primaryColor: "red",
           autoContrast: true,
+          defaultRadius: "sm",
         })}
       >
         {children}

apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx

@@ -198,7 +198,7 @@ const PasswordForgottenCollapse = ({ username }: PasswordForgottenCollapseProps)
         {tForgotPassword("label")}
       </Anchor>
 
-      <Collapse in={visible}>
+      <Collapse expanded={visible}>
         <Card>
           <Stack gap="xs">
             <Text size="sm">{tForgotPassword("description")}</Text>

apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx

@@ -24,6 +24,7 @@ export const BoardMantineProvider = ({
     },
     primaryColor: "primaryColor",
     autoContrast: true,
+    defaultRadius: "sm",
     fontSizes: {
       "2xl": rem(24),
       "3xl": rem(28),

apps/nextjs/src/app/[locale]/boards/[name]/settings/_appereance.tsx

@@ -83,7 +83,7 @@ export const ColorSettingsContent = ({ board }: Props) => {
             <Anchor onClick={toggle}>{showPreview ? t("common.preview.hide") : t("common.preview.show")}</Anchor>
           </Grid.Col>
           <Grid.Col span={12}>
-            <Collapse in={showPreview}>
+            <Collapse expanded={showPreview}>
               <Stack>
                 <ColorsPreview previewColor={form.values.primaryColor} />
                 <ColorsPreview previewColor={form.values.secondaryColor} />

apps/nextjs/src/app/[locale]/layout.tsx

@@ -142,7 +142,7 @@ export default async function Layout(props: {
       </head>
       <body className={["font-sans", fontSans.variable].join(" ")}>
         <StackedProvider>
-          <Notifications />
+          <Notifications pauseResetOnHover="notification" />
           <ServiceWorkerRegistration />
           {props.children}
         </StackedProvider>

apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx

@@ -79,7 +79,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
             </Button>
           </Group>
         </Group>
-        <Collapse in={editMode}>{children}</Collapse>
+        <Collapse expanded={editMode}>{children}</Collapse>
       </Stack>
     </Card>
   );

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx

@@ -226,7 +226,7 @@ const AppForm = ({ form, canCreateApps }: { form: UseFormReturnType<FormType>; c
         description={t("integration.field.createApp.description")}
       />
 
-      <Collapse in={form.values.hasApp}>
+      <Collapse expanded={form.values.hasApp}>
         <Fieldset legend={t("integration.field.app.sectionTitle")}>
           <Stack gap="sm">
             {canCreateApps && (

apps/nextjs/src/components/board/sections/category-section.tsx

@@ -44,7 +44,7 @@ export const BoardCategorySection = ({ section }: Props) => {
           </UnstyledButton>
           <CategoryMenu category={section} />
         </Group>
-        <Collapse in={opened} p="sm" pt={0}>
+        <Collapse expanded={opened} p="sm" pt={0}>
           <GridStack section={section} />
         </Collapse>
       </Stack>

packages/form/package.json

@@ -27,7 +27,6 @@
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@mantine/form": "catalog:",
-    "mantine-form-zod-resolver": "catalog:",
     "zod": "catalog:"
   },
   "devDependencies": {

packages/form/src/index.ts

@@ -1,5 +1,4 @@
-import { useForm } from "@mantine/form";
-import { zod4Resolver } from "mantine-form-zod-resolver";
+import { schemaResolver, useForm } from "@mantine/form";
 import type { ZodDiscriminatedUnion, ZodIntersection, ZodObject, ZodPipe } from "zod/v4";
 import { z } from "zod/v4";
 
@@ -34,6 +33,6 @@ export const useZodForm = <
     ...options,
     validateInputOnBlur: true,
     validateInputOnChange: true,
-    validate: zod4Resolver(schema),
+    validate: schemaResolver(schema, { sync: true }),
   });
 };

packages/forms-collection/src/new-app/_form.tsx

@@ -114,7 +114,7 @@ export const AppForm = ({
           mt="md"
         />
 
-        <Collapse in={opened}>
+        <Collapse expanded={opened}>
           <TextInput {...form.getInputProps("pingUrl")} />
         </Collapse>
 

packages/ui/src/theme.ts

@@ -9,4 +9,5 @@ export const theme = createTheme({
     secondaryColor,
   },
   primaryColor: "primaryColor",
+  defaultRadius: "sm",
 });

packages/widgets/package.json

@@ -50,6 +50,7 @@
     "@homarr/validation": "workspace:^0.1.0",
     "@mantine/charts": "catalog:",
     "@mantine/core": "catalog:",
+    "@mantine/form": "catalog:",
     "@mantine/hooks": "catalog:",
     "@tabler/icons-react": "catalog:",
     "@tiptap/extension-color": "catalog:",
@@ -70,7 +71,6 @@
     "@tiptap/starter-kit": "catalog:",
     "clsx": "catalog:",
     "dayjs": "catalog:",
-    "mantine-form-zod-resolver": "catalog:",
     "mantine-react-table": "catalog:",
     "next": "catalog:",
     "react": "catalog:",

packages/widgets/src/downloads/component.tsx

@@ -805,7 +805,7 @@ const ClientsControl = ({ clients, filters, setFilters, availableStatuses }: Cli
             <Chip.Group
               multiple
               value={filters.statuses}
-              onChange={(statuses) => setFilters({ ...filters, statuses: statuses as typeof filters.statuses })}
+              onChange={(statuses) => setFilters({ ...filters, statuses: statuses })}
             >
               {availableStatuses.map((status) => (
                 <Chip key={status} value={status}>

packages/widgets/src/firewall/component.tsx

@@ -153,7 +153,7 @@ export default function FirewallWidget({ integrationIds, width, itemId }: Widget
                           style={{ justifyContent: "flex-start" }}
                         >
                           <IconArrowBarUp size={isTiny ? "8" : "12"} color="lightgreen" />
-                          <Text size={isTiny ? "8px" : "xs"} color="lightgreen" style={{ textAlign: "left" }}>
+                          <Text size={isTiny ? "8px" : "xs"} c="lightgreen" style={{ textAlign: "left" }}>
                             {formatBitsPerSec(transmit, 2)}
                           </Text>
                         </Flex>
@@ -164,7 +164,7 @@ export default function FirewallWidget({ integrationIds, width, itemId }: Widget
                           style={{ justifyContent: "flex-start" }}
                         >
                           <IconArrowBarDown size={isTiny ? "8" : "12"} color="yellow" />
-                          <Text size={isTiny ? "8px" : "xs"} color="yellow" style={{ textAlign: "left" }}>
+                          <Text size={isTiny ? "8px" : "xs"} c="yellow" style={{ textAlign: "left" }}>
                             {formatBitsPerSec(receive, 2)}
                           </Text>
                         </Flex>

packages/widgets/src/media-requests/stats/component.tsx

@@ -103,7 +103,7 @@ export default function MediaServerWidget({
         <Text className="mediaRequests-stats-stats-title" fw="bold" ta="center" size={isTiny ? "xs" : "sm"}>
           {t("titles.stats.main")}
         </Text>
-        <Grid className="mediaRequests-stats-stats-grid" gutter={4} w="100%">
+        <Grid className="mediaRequests-stats-stats-grid" gap={4} w="100%">
           {data.map((stat) => (
             <Grid.Col
               className={combineClasses("mediaRequests-stats-stat-wrapper", `mediaRequests-stats-stat-${stat.name}`)}

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { Button, Group, Stack } from "@mantine/core";
-import { zod4Resolver } from "mantine-form-zod-resolver";
+import { schemaResolver } from "@mantine/form";
 import { z } from "zod/v4";
 
 import { objectEntries } from "@homarr/common";
@@ -50,7 +50,7 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
   const form = useForm({
     mode: "controlled",
     initialValues: innerProps.value,
-    validate: zod4Resolver(
+    validate: schemaResolver(
       z.object({
         options: z.object(
           objectEntries(options).reduce(
@@ -70,6 +70,7 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
           borderColor: z.string(),
         }),
       }),
+      { sync: true },
     ),
     validateInputOnBlur: true,
     validateInputOnChange: true,

pnpm-lock.yaml

@@ -417,9 +417,6 @@ catalogs:
     lodash.clonedeep:
       specifier: ^4.5.0
       version: 4.5.0
-    mantine-form-zod-resolver:
-      specifier: ^1.3.0
-      version: 1.3.0
     mantine-react-table:
       specifier: 2.0.0-beta.9
       version: 2.0.0-beta.9
@@ -1796,9 +1793,6 @@ importers:
       '@mantine/form':
         specifier: 'catalog:'
         version: 9.2.1(react@19.2.6)
-      mantine-form-zod-resolver:
-        specifier: 'catalog:'
-        version: 1.3.0(@mantine/form@9.2.1(react@19.2.6))(zod@4.4.3)
       zod:
         specifier: 'catalog:'
         version: 4.4.3
@@ -2757,6 +2751,9 @@ importers:
       '@mantine/core':
         specifier: 'catalog:'
         version: 9.2.1(@mantine/hooks@9.2.1(react@19.2.6))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mantine/form':
+        specifier: 'catalog:'
+        version: 9.2.1(react@19.2.6)
       '@mantine/hooks':
         specifier: 'catalog:'
         version: 9.2.1(react@19.2.6)
@@ -2817,9 +2814,6 @@ importers:
       dayjs:
         specifier: 'catalog:'
         version: 1.11.20
-      mantine-form-zod-resolver:
-        specifier: 'catalog:'
-        version: 1.3.0(@mantine/form@9.2.1(react@19.2.6))(zod@4.4.3)
       mantine-react-table:
         specifier: 'catalog:'
         version: 2.0.0-beta.9(@mantine/core@9.2.1(@mantine/hooks@9.2.1(react@19.2.6))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/dates@9.2.1(@mantine/core@9.2.1(@mantine/hooks@9.2.1(react@19.2.6))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@9.2.1(react@19.2.6))(dayjs@1.11.20)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@9.2.1(react@19.2.6))(@tabler/icons-react@3.44.0(react@19.2.6))(clsx@2.1.1)(dayjs@1.11.20)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -8149,13 +8143,6 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
-  mantine-form-zod-resolver@1.3.0:
-    resolution: {integrity: sha512-XlXXkJCYuUuOllW0zedYW+m/lbdFQ/bso1Vz+pJOYkxgjhoGvzN2EXWCS2+0iTOT9Q7WnOwWvHmvpTJN3PxSXw==}
-    engines: {node: '>=16.6.0'}
-    peerDependencies:
-      '@mantine/form': '>=7.0.0'
-      zod: '>=3.25.0'
-
   mantine-react-table@2.0.0-beta.9:
     resolution: {integrity: sha512-ZdfcwebWaPERoDvAuk43VYcBCzamohARVclnbuepT0PHZ0wRcDPMBR+zgaocL+pFy8EXUGwvWTOKNh25ITpjNQ==}
     engines: {node: '>=16'}
@@ -16214,11 +16201,6 @@ snapshots:
     dependencies:
       semver: 7.7.4
 
-  mantine-form-zod-resolver@1.3.0(@mantine/form@9.2.1(react@19.2.6))(zod@4.4.3):
-    dependencies:
-      '@mantine/form': 9.2.1(react@19.2.6)
-      zod: 4.4.3
-
   mantine-react-table@2.0.0-beta.9(@mantine/core@9.2.1(@mantine/hooks@9.2.1(react@19.2.6))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/dates@9.2.1(@mantine/core@9.2.1(@mantine/hooks@9.2.1(react@19.2.6))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@9.2.1(react@19.2.6))(dayjs@1.11.20)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@9.2.1(react@19.2.6))(@tabler/icons-react@3.44.0(react@19.2.6))(clsx@2.1.1)(dayjs@1.11.20)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
     dependencies:
       '@mantine/core': 9.2.1(@mantine/hooks@9.2.1(react@19.2.6))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)

pnpm-workspace.yaml

@@ -140,7 +140,6 @@ catalog:
   json5: ^2.2.3
   ldapts: 8.1.7
   lodash.clonedeep: ^4.5.0
-  mantine-form-zod-resolver: ^1.3.0
   mantine-react-table: 2.0.0-beta.9
   maria2: ^0.4.1
   mysql2: 3.22.3