fix: nextjs is slow dev server (#364)

* fix: nextjs slow compile time

* fix: change optimized package imports and transpile packages

* fix: format issue

apps/nextjs/next.config.mjs

@@ -6,17 +6,6 @@ import "@homarr/auth/env.mjs";
 const config = {
   output: "standalone",
   reactStrictMode: true,
-  /** Enables hot reloading for local packages without a build step */
-  transpilePackages: [
-    "@homarr/api",
-    "@homarr/auth",
-    "@homarr/db",
-    "@homarr/ui",
-    "@homarr/validation",
-    "@homarr/form",
-    "@homarr/notifications",
-    "@homarr/spotlight",
-  ],
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
@@ -24,12 +13,16 @@ const config = {
     optimizePackageImports: [
       "@mantine/core",
       "@mantine/hooks",
-      "@mantine/dates",
-      "@mantine/notifications",
-      "@mantine/form",
-      "@mantine/spotlight",
+      "@tabler/icons-react",
     ],
   },
+  transpilePackages: [
+    "@homarr/ui",
+    "@homarr/notifications",
+    "@homarr/modals",
+    "@homarr/spotlight",
+    "@homarr/widgets",
+  ],
   images: {
     domains: ["cdn.jsdelivr.net"],
   },

apps/nextjs/src/app/[locale]/(main)/apps/_app-delete-button.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useCallback } from "react";
+import { ActionIcon } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -10,7 +12,6 @@ import {
   showSuccessNotification,
 } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { ActionIcon, IconTrash } from "@homarr/ui";
 
 import { revalidatePathAction } from "../../../revalidatePathAction";
 

apps/nextjs/src/app/[locale]/(main)/apps/_form.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import Link from "next/link";
+import { Button, Group, Stack, Textarea, TextInput } from "@mantine/core";
 
 import { useForm, zodResolver } from "@homarr/form";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Group, Stack, Textarea, TextInput } from "@homarr/ui";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 

apps/nextjs/src/app/[locale]/(main)/apps/edit/[id]/page.tsx

@@ -1,6 +1,7 @@
+import { Container, Stack, Title } from "@mantine/core";
+
 import { api } from "@homarr/api/server";
 import { getI18n } from "@homarr/translation/server";
-import { Container, Stack, Title } from "@homarr/ui";
 
 import { AppEditForm } from "./_app-edit-form";
 

apps/nextjs/src/app/[locale]/(main)/apps/new/page.tsx

@@ -1,4 +1,4 @@
-import { Container, Stack, Title } from "@homarr/ui";
+import { Container, Stack, Title } from "@mantine/core";
 
 import { AppNewForm } from "./_app-new-form";
 

apps/nextjs/src/app/[locale]/(main)/apps/page.tsx

@@ -1,8 +1,4 @@
 import Link from "next/link";
-
-import type { RouterOutputs } from "@homarr/api";
-import { api } from "@homarr/api/server";
-import { getI18n } from "@homarr/translation/server";
 import {
   ActionIcon,
   ActionIconGroup,
@@ -12,12 +8,15 @@ import {
   Card,
   Container,
   Group,
-  IconApps,
-  IconPencil,
   Stack,
   Text,
   Title,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconApps, IconPencil } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { api } from "@homarr/api/server";
+import { getI18n } from "@homarr/translation/server";
 
 import { AppDeleteButton } from "./_app-delete-button";
 

apps/nextjs/src/app/[locale]/(main)/integrations/_integration-avatar.tsx

@@ -1,7 +1,8 @@
+import { Avatar } from "@mantine/core";
+import type { MantineSize } from "@mantine/core";
+
 import { getIconUrl } from "@homarr/definitions";
 import type { IntegrationKind } from "@homarr/definitions";
-import { Avatar } from "@homarr/ui";
-import type { MantineSize } from "@homarr/ui";
 
 interface IntegrationAvatarProps {
   size: MantineSize;

apps/nextjs/src/app/[locale]/(main)/integrations/_integration-buttons.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import { ActionIcon } from "@mantine/core";
+import { IconTrash } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal } from "@homarr/modals";
@@ -9,7 +11,6 @@ import {
   showSuccessNotification,
 } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { ActionIcon, IconTrash } from "@homarr/ui";
 
 import { revalidatePathAction } from "../../../revalidatePathAction";
 

apps/nextjs/src/app/[locale]/(main)/integrations/_integration-secret-card.tsx

@@ -2,13 +2,6 @@
 
 import { useState } from "react";
 import { useParams } from "next/navigation";
-import { useDisclosure } from "@mantine/hooks";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-
-import type { RouterOutputs } from "@homarr/api";
-import { integrationSecretKindObject } from "@homarr/definitions";
-import { useI18n } from "@homarr/translation/client";
 import {
   ActionIcon,
   Avatar,
@@ -16,12 +9,18 @@ import {
   Card,
   Collapse,
   Group,
-  IconEye,
-  IconEyeOff,
   Kbd,
   Stack,
   Text,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+import type { RouterOutputs } from "@homarr/api";
+import { integrationSecretKindObject } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
 
 import { integrationSecretIcons } from "./_integration-secret-icons";
 

apps/nextjs/src/app/[locale]/(main)/integrations/_integration-secret-icons.ts

@@ -1,6 +1,7 @@
+import { IconKey, IconPassword, IconUser } from "@tabler/icons-react";
+
 import type { IntegrationSecretKind } from "@homarr/definitions";
 import type { TablerIcon } from "@homarr/ui";
-import { IconKey, IconPassword, IconUser } from "@homarr/ui";
 
 export const integrationSecretIcons = {
   username: IconUser,

apps/nextjs/src/app/[locale]/(main)/integrations/_integration-secret-inputs.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import type { ChangeEventHandler, FocusEventHandler } from "react";
+import { PasswordInput, TextInput } from "@mantine/core";
 
 import { integrationSecretKindObject } from "@homarr/definitions";
 import type { IntegrationSecretKind } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
-import { PasswordInput, TextInput } from "@homarr/ui";
 
 import { integrationSecretIcons } from "./_integration-secret-icons";
 

apps/nextjs/src/app/[locale]/(main)/integrations/_integration-test-connection.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useRef, useState } from "react";
+import { Alert, Anchor, Group, Loader } from "@mantine/core";
+import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
 
 import type { RouterInputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -9,15 +11,6 @@ import {
   showSuccessNotification,
 } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import {
-  Alert,
-  Anchor,
-  Group,
-  IconCheck,
-  IconInfoCircle,
-  IconX,
-  Loader,
-} from "@homarr/ui";
 
 interface UseTestConnectionDirtyProps {
   defaultDirty: boolean;

apps/nextjs/src/app/[locale]/(main)/integrations/edit/[id]/_integration-edit-form.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { Button, Fieldset, Group, Stack, TextInput } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -16,7 +17,6 @@ import {
   showSuccessNotification,
 } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Fieldset, Group, Stack, TextInput } from "@homarr/ui";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 

apps/nextjs/src/app/[locale]/(main)/integrations/edit/[id]/page.tsx

@@ -1,7 +1,8 @@
+import { Container, Group, Stack, Title } from "@mantine/core";
+
 import { api } from "@homarr/api/server";
 import { getIntegrationName } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
-import { Container, Group, Stack, Title } from "@homarr/ui";
 
 import { IntegrationAvatar } from "../../_integration-avatar";
 import { EditIntegrationForm } from "./_integration-edit-form";

apps/nextjs/src/app/[locale]/(main)/integrations/new/_integration-new-dropdown.tsx

@@ -2,18 +2,11 @@
 
 import { useMemo, useState } from "react";
 import Link from "next/link";
+import { Group, Menu, ScrollArea, Stack, Text, TextInput } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
 
 import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
-import {
-  Group,
-  IconSearch,
-  Menu,
-  ScrollArea,
-  Stack,
-  Text,
-  TextInput,
-} from "@homarr/ui";
 
 import { IntegrationAvatar } from "../_integration-avatar";
 

apps/nextjs/src/app/[locale]/(main)/integrations/new/_integration-new-form.tsx

@@ -3,6 +3,14 @@
 import { useCallback } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import {
+  Button,
+  Fieldset,
+  Group,
+  SegmentedControl,
+  Stack,
+  TextInput,
+} from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type {
@@ -17,14 +25,6 @@ import {
   showSuccessNotification,
 } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import {
-  Button,
-  Fieldset,
-  Group,
-  SegmentedControl,
-  Stack,
-  TextInput,
-} from "@homarr/ui";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 

apps/nextjs/src/app/[locale]/(main)/integrations/new/page.tsx

@@ -1,9 +1,9 @@
 import { notFound } from "next/navigation";
+import { Container, Group, Stack, Title } from "@mantine/core";
 
 import type { IntegrationKind } from "@homarr/definitions";
 import { getIntegrationName, integrationKinds } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
-import { Container, Group, Stack, Title } from "@homarr/ui";
 import type { validation } from "@homarr/validation";
 import { z } from "@homarr/validation";
 

apps/nextjs/src/app/[locale]/(main)/integrations/page.tsx

@@ -1,11 +1,4 @@
 import Link from "next/link";
-
-import type { RouterOutputs } from "@homarr/api";
-import { api } from "@homarr/api/server";
-import { objectEntries } from "@homarr/common";
-import type { IntegrationKind } from "@homarr/definitions";
-import { getIntegrationName } from "@homarr/definitions";
-import { getScopedI18n } from "@homarr/translation/server";
 import {
   AccordionControl,
   AccordionItem,
@@ -15,10 +8,7 @@ import {
   Anchor,
   Button,
   Container,
-  CountBadge,
   Group,
-  IconChevronDown,
-  IconPencil,
   Menu,
   MenuDropdown,
   MenuTarget,
@@ -31,7 +21,16 @@ import {
   TableTr,
   Text,
   Title,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconChevronDown, IconPencil } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { api } from "@homarr/api/server";
+import { objectEntries } from "@homarr/common";
+import type { IntegrationKind } from "@homarr/definitions";
+import { getIntegrationName } from "@homarr/definitions";
+import { getScopedI18n } from "@homarr/translation/server";
+import { CountBadge } from "@homarr/ui";
 
 import { ActiveTabAccordion } from "../../../../components/active-tab-accordion";
 import { IntegrationAvatar } from "./_integration-avatar";

apps/nextjs/src/app/[locale]/(main)/layout.tsx

@@ -1,6 +1,5 @@
 import type { PropsWithChildren } from "react";
-
-import { AppShellMain } from "@homarr/ui";
+import { AppShellMain } from "@mantine/core";
 
 import { MainHeader } from "~/components/layout/header";
 import { ClientShell } from "~/components/layout/shell";

apps/nextjs/src/app/[locale]/(main)/page.tsx

@@ -1,4 +1,4 @@
-import { Stack, Title } from "@homarr/ui";
+import { Stack, Title } from "@mantine/core";
 
 export default function HomePage() {
   return (

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

@@ -2,19 +2,19 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-
-import { signIn } from "@homarr/auth/client";
-import { useForm, zodResolver } from "@homarr/form";
-import { useScopedI18n } from "@homarr/translation/client";
 import {
   Alert,
   Button,
-  IconAlertTriangle,
   PasswordInput,
   rem,
   Stack,
   TextInput,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { signIn } from "@homarr/auth/client";
+import { useForm, zodResolver } from "@homarr/form";
+import { useScopedI18n } from "@homarr/translation/client";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 

apps/nextjs/src/app/[locale]/auth/login/page.tsx

@@ -1,5 +1,6 @@
+import { Card, Center, Stack, Text, Title } from "@mantine/core";
+
 import { getScopedI18n } from "@homarr/translation/server";
-import { Card, Center, Stack, Text, Title } from "@homarr/ui";
 
 import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
 import { LoginForm } from "./_login-form";

apps/nextjs/src/app/[locale]/boards/[name]/@headeractions/page.tsx

@@ -1,6 +1,17 @@
 "use client";
 
 import { useCallback } from "react";
+import { Group, Menu } from "@mantine/core";
+import {
+  IconBox,
+  IconBoxAlignTop,
+  IconChevronDown,
+  IconPackageImport,
+  IconPencil,
+  IconPencilOff,
+  IconPlus,
+  IconSettings,
+} from "@tabler/icons-react";
 import { useAtom, useAtomValue } from "jotai";
 
 import { clientApi } from "@homarr/api/client";
@@ -10,18 +21,6 @@ import {
   showSuccessNotification,
 } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import {
-  Group,
-  IconBox,
-  IconBoxAlignTop,
-  IconChevronDown,
-  IconPackageImport,
-  IconPencil,
-  IconPencilOff,
-  IconPlus,
-  IconSettings,
-  Menu,
-} from "@homarr/ui";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";
 import { editModeAtom } from "~/components/board/editMode";

apps/nextjs/src/app/[locale]/boards/[name]/@headeractions/settings/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { IconLayoutBoard } from "@homarr/ui";
+import { IconLayoutBoard } from "@tabler/icons-react";
 
 import { HeaderButton } from "~/components/layout/header/button";
 import { useRequiredBoard } from "../../../_context";

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

@@ -1,24 +1,11 @@
 "use client";
 
 import { useCallback } from "react";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import type { BoardPermission } from "@homarr/definitions";
-import { boardPermissions } from "@homarr/definitions";
-import { useForm } from "@homarr/form";
-import { createModal, useModalAction } from "@homarr/modals";
-import { useI18n } from "@homarr/translation/client";
-import type { SelectProps, TablerIcon } from "@homarr/ui";
+import type { SelectProps } from "@mantine/core";
 import {
   Button,
   Flex,
   Group,
-  IconCheck,
-  IconEye,
-  IconPencil,
-  IconPlus,
-  IconSettings,
   Select,
   Stack,
   Table,
@@ -28,7 +15,23 @@ import {
   TableThead,
   TableTr,
   Text,
-} from "@homarr/ui";
+} from "@mantine/core";
+import {
+  IconCheck,
+  IconEye,
+  IconPencil,
+  IconPlus,
+  IconSettings,
+} from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import type { BoardPermission } from "@homarr/definitions";
+import { boardPermissions } from "@homarr/definitions";
+import { useForm } from "@homarr/form";
+import { createModal, useModalAction } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+import type { TablerIcon } from "@homarr/ui";
 
 import type { Board } from "../../_types";
 

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

@@ -1,5 +1,7 @@
 "use client";
 
+import { Button, Grid, Group, Stack, TextInput } from "@mantine/core";
+
 import {
   backgroundImageAttachments,
   backgroundImageRepeats,
@@ -8,14 +10,9 @@ import {
 import { useForm } from "@homarr/form";
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import type { SelectItemWithDescriptionBadge } from "@homarr/ui";
 import {
-  Button,
-  Grid,
-  Group,
+  SelectItemWithDescriptionBadge,
   SelectWithDescriptionBadge,
-  Stack,
-  TextInput,
 } from "@homarr/ui";
 
 import type { Board } from "../../_types";

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

@@ -1,9 +1,5 @@
 "use client";
 
-import { useDisclosure } from "@mantine/hooks";
-
-import { useForm } from "@homarr/form";
-import { useI18n } from "@homarr/translation/client";
 import {
   Anchor,
   Button,
@@ -18,7 +14,11 @@ import {
   Stack,
   Text,
   useMantineTheme,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+
+import { useForm } from "@homarr/form";
+import { useI18n } from "@homarr/translation/client";
 
 import { generateColors } from "../../_theme";
 import type { Board } from "../../_types";

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

@@ -2,11 +2,11 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
+import { Button, Divider, Group, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
-import { Button, Divider, Group, Stack, Text } from "@homarr/ui";
 
 import { BoardRenameModal } from "~/components/board/modals/board-rename-modal";
 import { useRequiredBoard } from "../../_context";

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

@@ -1,24 +1,24 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import {
+  Button,
+  Grid,
+  Group,
+  Loader,
+  Stack,
+  TextInput,
+  Tooltip,
+} from "@mantine/core";
 import {
   useDebouncedValue,
   useDocumentTitle,
   useFavicon,
 } from "@mantine/hooks";
+import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { useForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import {
-  Button,
-  Grid,
-  Group,
-  IconAlertTriangle,
-  Loader,
-  Stack,
-  TextInput,
-  Tooltip,
-} from "@homarr/ui";
 
 import { useUpdateBoard } from "../../_client";
 import type { Board } from "../../_types";

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

@@ -1,8 +1,9 @@
 "use client";
 
+import { Button, Grid, Group, Input, Slider, Stack } from "@mantine/core";
+
 import { useForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Grid, Group, Input, Slider, Stack } from "@homarr/ui";
 
 import type { Board } from "../../_types";
 import { useSavePartialSettingsMutation } from "./_shared";

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

@@ -1,15 +1,14 @@
 import type { PropsWithChildren } from "react";
-
-import { api } from "@homarr/api/server";
-import { capitalize } from "@homarr/common";
-import type { TranslationObject } from "@homarr/translation";
-import { getScopedI18n } from "@homarr/translation/server";
-import type { TablerIcon } from "@homarr/ui";
 import {
   AccordionControl,
   AccordionItem,
   AccordionPanel,
   Container,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
   IconAlertTriangle,
   IconBrush,
   IconFileTypeCss,
@@ -17,10 +16,13 @@ import {
   IconPhoto,
   IconSettings,
   IconUser,
-  Stack,
-  Text,
-  Title,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import { api } from "@homarr/api/server";
+import { capitalize } from "@homarr/common";
+import type { TranslationObject } from "@homarr/translation";
+import { getScopedI18n } from "@homarr/translation/server";
+import type { TablerIcon } from "@homarr/ui";
 
 import { ActiveTabAccordion } from "../../../../../components/active-tab-accordion";
 import { AccessSettingsContent } from "./_access";

apps/nextjs/src/app/[locale]/boards/_client.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useCallback, useRef } from "react";
+import { Box, LoadingOverlay, Stack } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { Box, LoadingOverlay, Stack } from "@homarr/ui";
 
 import { BoardCategorySection } from "~/components/board/sections/category-section";
 import { BoardEmptySection } from "~/components/board/sections/empty-section";

apps/nextjs/src/app/[locale]/boards/_creator.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren, ReactNode } from "react";
 import type { Metadata } from "next";
+import { AppShellMain } from "@mantine/core";
 
 import { capitalize } from "@homarr/common";
-import { AppShellMain } from "@homarr/ui";
 
 import { MainHeader } from "~/components/layout/header";
 import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";

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

@@ -1,9 +1,8 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-
-import type { MantineColorsTuple } from "@homarr/ui";
-import { createTheme, darken, lighten, MantineProvider } from "@homarr/ui";
+import type { MantineColorsTuple } from "@mantine/core";
+import { createTheme, darken, lighten, MantineProvider } from "@mantine/core";
 
 import { useRequiredBoard } from "./_context";
 

apps/nextjs/src/app/[locale]/init/user/_init-user-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useForm, zodResolver } from "@homarr/form";
@@ -9,7 +10,6 @@ import {
   showSuccessNotification,
 } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import { Button, PasswordInput, Stack, TextInput } from "@homarr/ui";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 

apps/nextjs/src/app/[locale]/init/user/page.tsx

@@ -1,8 +1,8 @@
 import { notFound } from "next/navigation";
+import { Card, Center, Stack, Text, Title } from "@mantine/core";
 
 import { db } from "@homarr/db";
 import { getScopedI18n } from "@homarr/translation/server";
-import { Card, Center, Stack, Text, Title } from "@homarr/ui";
 
 import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
 import { InitUserForm } from "./_init-user-form";

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

@@ -3,12 +3,13 @@ import { Inter } from "next/font/google";
 
 import "@homarr/notifications/styles.css";
 import "@homarr/spotlight/styles.css";
-import "@homarr/ui/styles.css";
+import "@mantine/core/styles.css";
+
+import { ColorSchemeScript, createTheme, MantineProvider } from "@mantine/core";
 
 import { auth } from "@homarr/auth";
 import { ModalProvider } from "@homarr/modals";
 import { Notifications } from "@homarr/notifications";
-import { ColorSchemeScript, createTheme, MantineProvider } from "@homarr/ui";
 
 import { JotaiProvider } from "./_client-providers/jotai";
 import { NextInternationalProvider } from "./_client-providers/next-international";

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

@@ -1,4 +1,4 @@
-import { Center, Loader } from "@homarr/ui";
+import { Center, Loader } from "@mantine/core";
 
 export default function CommonLoading() {
   return (

apps/nextjs/src/app/[locale]/manage/[...not-found]/page.tsx

@@ -1,5 +1,6 @@
+import { Center, Stack, Text, Title } from "@mantine/core";
+
 import { getScopedI18n } from "@homarr/translation/server";
-import { Center, Stack, Text, Title } from "@homarr/ui";
 
 export default async function NotFound() {
   const t = await getScopedI18n("management.notFound");

apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx

@@ -2,12 +2,13 @@
 
 import { useCallback } from "react";
 import Link from "next/link";
+import { Menu } from "@mantine/core";
+import { IconSettings, IconTrash } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
-import { IconSettings, IconTrash, Menu } from "@homarr/ui";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";
 

apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { useCallback } from "react";
+import { Button } from "@mantine/core";
+import { IconCategoryPlus } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, IconCategoryPlus } from "@homarr/ui";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";
 import { AddBoardModal } from "~/components/manage/boards/add-board-modal";

apps/nextjs/src/app/[locale]/manage/boards/page.tsx

@@ -1,8 +1,4 @@
 import Link from "next/link";
-
-import type { RouterOutputs } from "@homarr/api";
-import { api } from "@homarr/api/server";
-import { getScopedI18n } from "@homarr/translation/server";
 import {
   ActionIcon,
   Button,
@@ -11,15 +7,17 @@ import {
   Grid,
   GridCol,
   Group,
-  IconDotsVertical,
-  IconLock,
-  IconWorld,
   Menu,
   MenuTarget,
   Text,
   Title,
   Tooltip,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconDotsVertical, IconLock, IconWorld } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { api } from "@homarr/api/server";
+import { getScopedI18n } from "@homarr/translation/server";
 
 import { BoardCardMenuDropdown } from "./_components/board-card-menu-dropdown";
 import { CreateBoardButton } from "./_components/create-board-button";

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

@@ -1,8 +1,6 @@
 import type { PropsWithChildren } from "react";
-
-import { getScopedI18n } from "@homarr/translation/server";
+import { AppShellMain } from "@mantine/core";
 import {
-  AppShellMain,
   IconBook2,
   IconBrandDiscord,
   IconBrandDocker,
@@ -17,7 +15,9 @@ import {
   IconTool,
   IconUser,
   IconUsers,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import { getScopedI18n } from "@homarr/translation/server";
 
 import { MainHeader } from "~/components/layout/header";
 import type { NavigationLink } from "~/components/layout/navigation";

apps/nextjs/src/app/[locale]/manage/page.tsx

@@ -1,5 +1,6 @@
+import { Title } from "@mantine/core";
+
 import { getScopedI18n } from "@homarr/translation/server";
-import { Title } from "@homarr/ui";
 
 import { Test } from "./test";
 

apps/nextjs/src/app/[locale]/manage/test.tsx

@@ -2,9 +2,9 @@
 
 import { useCallback, useState } from "react";
 import type { ChangeEvent } from "react";
+import { Button, Stack, Text, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { Button, Stack, Text, TextInput } from "@homarr/ui";
 
 export const Test = () => {
   const [value, setValue] = useState("");

apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx

@@ -1,5 +1,6 @@
+import { Box } from "@mantine/core";
+
 import { getScopedI18n } from "@homarr/translation/server";
-import { Box } from "@homarr/ui";
 
 import "@xterm/xterm/css/xterm.css";
 

apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import { Box } from "@mantine/core";
 import { CanvasAddon } from "@xterm/addon-canvas";
 import { FitAddon } from "@xterm/addon-fit";
 import { Terminal } from "@xterm/xterm";
 
 import { clientApi } from "@homarr/api/client";
-import { Box } from "@homarr/ui";
 
 import classes from "./terminal.module.css";
 

apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/dangerZone.accordion.tsx

@@ -2,11 +2,11 @@
 
 import React from "react";
 import { useRouter } from "next/navigation";
+import { Button, Divider, Group, Stack, Text } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
-import { Button, Divider, Group, Stack, Text } from "@homarr/ui";
 
 interface DangerZoneAccordionProps {
   user: NonNullable<RouterOutputs["user"]["getById"]>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx

@@ -1,10 +1,11 @@
 "use client";
 
+import { Button, Stack, TextInput } from "@mantine/core";
+
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useForm, zodResolver } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
-import { Button, Stack, TextInput } from "@homarr/ui";
 import { validation } from "@homarr/validation";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";

apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/security.accordion.tsx

@@ -1,11 +1,12 @@
 "use client";
 
+import { Button, PasswordInput, Stack, Title } from "@mantine/core";
+
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useForm, zodResolver } from "@homarr/form";
 import { showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { Button, PasswordInput, Stack, Title } from "@homarr/ui";
 import { validation } from "@homarr/validation";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";

apps/nextjs/src/app/[locale]/manage/users/[userId]/page.tsx

@@ -1,7 +1,4 @@
 import { notFound } from "next/navigation";
-
-import { api } from "@homarr/api/server";
-import { getScopedI18n } from "@homarr/translation/server";
 import {
   Accordion,
   AccordionControl,
@@ -9,14 +6,19 @@ import {
   AccordionPanel,
   Avatar,
   Group,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
   IconAlertTriangleFilled,
   IconSettingsFilled,
   IconShieldLockFilled,
   IconUserFilled,
-  Stack,
-  Text,
-  Title,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import { api } from "@homarr/api/server";
+import { getScopedI18n } from "@homarr/translation/server";
 
 import { DangerZoneAccordion } from "./_components/dangerZone.accordion";
 import { ProfileAccordion } from "./_components/profile.accordion";

apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx

@@ -2,21 +2,14 @@
 
 import { useMemo } from "react";
 import Link from "next/link";
+import { Avatar, Button, Group, Text, ThemeIcon, Title } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
 import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
-import {
-  Avatar,
-  Button,
-  Group,
-  IconCheck,
-  Text,
-  ThemeIcon,
-  Title,
-} from "@homarr/ui";
 
 interface UserListComponentProps {
   initialUserList: RouterOutputs["user"]["getAll"];

apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx

@@ -1,21 +1,21 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-
-import { clientApi } from "@homarr/api/client";
-import { useForm, zodResolver } from "@homarr/form";
-import { useScopedI18n } from "@homarr/translation/client";
 import {
   Avatar,
   Card,
-  IconUserCheck,
   PasswordInput,
   Stack,
   Stepper,
   Text,
   TextInput,
   Title,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconUserCheck } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useForm, zodResolver } from "@homarr/form";
+import { useScopedI18n } from "@homarr/translation/client";
 import { validation, z } from "@homarr/validation";
 
 import { StepperNavigationComponent } from "./stepper-navigation.component";

apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.component.tsx

@@ -1,15 +1,13 @@
 import Link from "next/link";
-
-import { useI18n } from "@homarr/translation/client";
+import { Button, Card, Group } from "@mantine/core";
 import {
-  Button,
-  Card,
-  Group,
   IconArrowBackUp,
   IconArrowLeft,
   IconArrowRight,
   IconRotate,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import { useI18n } from "@homarr/translation/client";
 
 interface StepperNavigationComponentProps {
   hasPrevious: boolean;

apps/nextjs/src/app/[locale]/not-found.tsx

@@ -1,4 +1,4 @@
-import { Center } from "@homarr/ui";
+import { Center } from "@mantine/core";
 
 export default function CommonNotFound() {
   return <Center h="100vh">404</Center>;

apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx

@@ -1,20 +1,18 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
+import { ActionIcon, Affix, Card } from "@mantine/core";
+import {
+  IconDimensions,
+  IconPencil,
+  IconToggleLeft,
+  IconToggleRight,
+} from "@tabler/icons-react";
 
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import {
-  ActionIcon,
-  Affix,
-  Card,
-  IconDimensions,
-  IconPencil,
-  IconToggleLeft,
-  IconToggleRight,
-} from "@homarr/ui";
 import {
   loadWidgetDynamic,
   reduceWidgetOptionsWithDefaultValues,

apps/nextjs/src/app/[locale]/widgets/[kind]/_dimension-modal.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { Button, Group, InputWrapper, Slider, Stack } from "@mantine/core";
+
 import { useForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Group, InputWrapper, Slider, Stack } from "@homarr/ui";
 
 interface InnerProps {
   dimensions: Dimensions;

apps/nextjs/src/app/[locale]/widgets/[kind]/page.tsx

@@ -1,8 +1,8 @@
 import { notFound } from "next/navigation";
+import { Center } from "@mantine/core";
 
 import { db } from "@homarr/db";
 import type { WidgetKind } from "@homarr/definitions";
-import { Center } from "@homarr/ui";
 import { widgetImports } from "@homarr/widgets";
 
 import { env } from "~/env.mjs";

apps/nextjs/src/components/active-tab-accordion.tsx

@@ -3,11 +3,10 @@
 import type { PropsWithChildren } from "react";
 import { useCallback } from "react";
 import { usePathname } from "next/navigation";
+import type { AccordionProps } from "@mantine/core";
+import { Accordion } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 
-import type { AccordionProps } from "@homarr/ui";
-import { Accordion } from "@homarr/ui";
-
 type ActiveTabAccordionProps = PropsWithChildren<
   Omit<AccordionProps<false>, "onChange">
 >;

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -1,7 +1,8 @@
+import { Button, Card, Center, Grid, Stack, Text } from "@mantine/core";
+
 import type { WidgetKind } from "@homarr/definitions";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Card, Center, Grid, Stack, Text } from "@homarr/ui";
 
 import { objectEntries } from "../../../../../../packages/common/src";
 import { widgetImports } from "../../../../../../packages/widgets/src";

apps/nextjs/src/components/board/modals/board-rename-modal.tsx

@@ -1,10 +1,11 @@
 "use client";
 
+import { Button, Group, Stack, TextInput } from "@mantine/core";
+
 import { clientApi } from "@homarr/api/client";
 import { useForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Group, Stack, TextInput } from "@homarr/ui";
 import type { validation, z } from "@homarr/validation";
 
 interface InnerProps {

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

@@ -1,16 +1,14 @@
 import type { RefObject } from "react";
-import { useDisclosure } from "@mantine/hooks";
-
 import {
   Card,
   Collapse,
   Group,
-  IconChevronDown,
-  IconChevronUp,
   Stack,
   Title,
   UnstyledButton,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
 import { CategoryMenu } from "./category/category-menu";

apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx

@@ -1,7 +1,8 @@
+import { Button, Group, Stack, TextInput } from "@mantine/core";
+
 import { useForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Group, Stack, TextInput } from "@homarr/ui";
 
 interface Category {
   id: string;

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

@@ -1,12 +1,8 @@
 "use client";
 
 import React, { useMemo } from "react";
-import { useAtomValue } from "jotai";
-
-import { useScopedI18n } from "@homarr/translation/client";
-import type { TablerIcon } from "@homarr/ui";
+import { ActionIcon, Menu } from "@mantine/core";
 import {
-  ActionIcon,
   IconDotsVertical,
   IconEdit,
   IconRowInsertBottom,
@@ -14,8 +10,11 @@ import {
   IconTransitionBottom,
   IconTransitionTop,
   IconTrash,
-  Menu,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+import { useAtomValue } from "jotai";
+
+import { useScopedI18n } from "@homarr/translation/client";
+import type { TablerIcon } from "@homarr/ui";
 
 import type { CategorySection } from "~/app/[locale]/boards/_types";
 import { editModeAtom } from "../../editMode";

apps/nextjs/src/components/board/sections/content.tsx

@@ -2,21 +2,19 @@
 // Ignored because of gridstack attributes
 
 import type { RefObject } from "react";
+import { ActionIcon, Card, Menu } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
+import {
+  IconDotsVertical,
+  IconLayoutKanban,
+  IconPencil,
+  IconTrash,
+} from "@tabler/icons-react";
 import combineClasses from "clsx";
 import { useAtomValue } from "jotai";
 
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
-import {
-  ActionIcon,
-  Card,
-  IconDotsVertical,
-  IconLayoutKanban,
-  IconPencil,
-  IconTrash,
-  Menu,
-} from "@homarr/ui";
 import {
   loadWidgetDynamic,
   reduceWidgetOptionsWithDefaultValues,

apps/nextjs/src/components/layout/background.tsx

@@ -1,6 +1,5 @@
 import { usePathname } from "next/navigation";
-
-import type { AppShellProps } from "@homarr/ui";
+import type { AppShellProps } from "@mantine/core";
 
 import { useOptionalBoard } from "~/app/[locale]/boards/_context";
 

apps/nextjs/src/components/layout/header.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
+import { AppShellHeader, Group, UnstyledButton } from "@mantine/core";
 
 import { Spotlight } from "@homarr/spotlight";
-import { AppShellHeader, Group, UnstyledButton } from "@homarr/ui";
 
 import { ClientBurger } from "./header/burger";
 import { DesktopSearchInput, MobileSearchButton } from "./header/search";

apps/nextjs/src/components/layout/header/burger.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import { useCallback } from "react";
+import { Burger } from "@mantine/core";
 import { atom, useAtom } from "jotai";
 
-import { Burger } from "@homarr/ui";
-
 export const navigationCollapsedAtom = atom(true);
 
 export const ClientBurger = () => {

apps/nextjs/src/components/layout/header/button.tsx

@@ -1,9 +1,8 @@
 import type { ForwardedRef, ReactNode } from "react";
 import { forwardRef } from "react";
 import Link from "next/link";
-
-import type { ActionIconProps } from "@homarr/ui";
-import { ActionIcon } from "@homarr/ui";
+import type { ActionIconProps } from "@mantine/core";
+import { ActionIcon } from "@mantine/core";
 
 type HeaderButtonProps = (
   | {

apps/nextjs/src/components/layout/header/search.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { TextInput, UnstyledButton } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+
 import { openSpotlight } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
-import { IconSearch, TextInput, UnstyledButton } from "@homarr/ui";
 
 import { HeaderButton } from "./button";
 import classes from "./search.module.css";

apps/nextjs/src/components/layout/header/user.tsx

@@ -1,4 +1,4 @@
-import { UnstyledButton } from "@homarr/ui";
+import { UnstyledButton } from "@mantine/core";
 
 import { UserAvatar } from "~/components/user-avatar";
 import { UserAvatarMenu } from "~/components/user-avatar-menu";

apps/nextjs/src/components/layout/logo/logo.tsx

@@ -1,7 +1,6 @@
 import Image from "next/image";
-
-import type { TitleOrder } from "@homarr/ui";
-import { Group, Title } from "@homarr/ui";
+import type { TitleOrder } from "@mantine/core";
+import { Group, Title } from "@mantine/core";
 
 interface LogoProps {
   size: number;

apps/nextjs/src/components/layout/navigation-link.tsx

@@ -3,8 +3,7 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-
-import { NavLink } from "@homarr/ui";
+import { NavLink } from "@mantine/core";
 
 export const CommonNavLink = (props: ClientNavigationLink) =>
   "href" in props ? (

apps/nextjs/src/components/layout/navigation.tsx

@@ -1,5 +1,6 @@
+import { AppShellNavbar, AppShellSection, ScrollArea } from "@mantine/core";
+
 import type { TablerIcon } from "@homarr/ui";
-import { AppShellNavbar, AppShellSection, ScrollArea } from "@homarr/ui";
 
 import type { ClientNavigationLink } from "./navigation-link";
 import { CommonNavLink } from "./navigation-link";

apps/nextjs/src/components/layout/shell.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
+import { AppShell } from "@mantine/core";
 import { useAtomValue } from "jotai";
 
-import { AppShell } from "@homarr/ui";
-
 import { useOptionalBackgroundProps } from "./background";
 import { navigationCollapsedAtom } from "./header/burger";
 

apps/nextjs/src/components/manage/boards/add-board-modal.tsx

@@ -1,9 +1,9 @@
+import { Button, Group, Stack, TextInput } from "@mantine/core";
 import { boardSchemas } from "node_modules/@homarr/validation/src/board";
 
 import { useForm, zodResolver } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Group, Stack, TextInput } from "@homarr/ui";
 import { z } from "@homarr/validation";
 
 interface InnerProps {

apps/nextjs/src/components/user-avatar-menu.tsx

@@ -2,17 +2,16 @@
 
 import type { ReactNode } from "react";
 import Link from "next/link";
-
-import { useScopedI18n } from "@homarr/translation/client";
+import { Menu, useMantineColorScheme } from "@mantine/core";
 import {
   IconDashboard,
   IconLogout,
   IconMoon,
   IconSun,
   IconTool,
-  Menu,
-  useMantineColorScheme,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import { useScopedI18n } from "@homarr/translation/client";
 
 interface UserAvatarMenuProps {
   children: ReactNode;

apps/nextjs/src/components/user-avatar.tsx

@@ -1,6 +1,7 @@
+import type { AvatarProps, MantineSize } from "@mantine/core";
+import { Avatar } from "@mantine/core";
+
 import { auth } from "@homarr/auth";
-import type { AvatarProps, MantineSize } from "@homarr/ui";
-import { Avatar } from "@homarr/ui";
 
 interface UserAvatarProps {
   size: MantineSize;

package.json

@@ -40,5 +40,11 @@
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.5.0"
   },
+  "dependencies": {
+    "@mantine/core": "^7.8.0",
+    "@mantine/dates": "^7.8.0",
+    "@tabler/icons-react": "^3.2.0",
+    "mantine-react-table": "2.0.0-beta.1"
+  },
   "prettier": "@homarr/prettier-config"
 }

packages/modals/src/confirm-modal.tsx

@@ -1,5 +1,7 @@
 import { useCallback } from "react";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ButtonProps, GroupProps } from "@mantine/core";
+import { Box, Button, Group } from "@mantine/core";
 
 import type {
   stringOrTranslation,
@@ -7,8 +9,6 @@ import type {
 } from "@homarr/translation";
 import { translateIfNecessary } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import type { ButtonProps, GroupProps } from "@homarr/ui";
-import { Box, Button, Group } from "@homarr/ui";
 
 import { createModal } from "./creator";
 

packages/modals/src/index.tsx

@@ -8,12 +8,12 @@ import {
   useReducer,
   useRef,
 } from "react";
+import { getDefaultZIndex, Modal } from "@mantine/core";
 import { randomId } from "@mantine/hooks";
 
 import type { stringOrTranslation } from "@homarr/translation";
 import { translateIfNecessary } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import { getDefaultZIndex, Modal } from "@homarr/ui";
 
 import type { ConfirmModalProps } from "./confirm-modal";
 import { ConfirmModal } from "./confirm-modal";

packages/modals/src/type.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
+import type { ModalProps } from "@mantine/core";
 
 import type { stringOrTranslation } from "@homarr/translation";
-import type { ModalProps } from "@homarr/ui";
 
 export type ModalComponent<TInnerProps> = (props: {
   actions: { closeModal: () => void };

packages/notifications/src/index.tsx

@@ -1,7 +1,6 @@
 import type { NotificationData } from "@mantine/notifications";
 import { notifications } from "@mantine/notifications";
-
-import { IconCheck, IconX } from "@homarr/ui";
+import { IconCheck, IconX } from "@tabler/icons-react";
 
 type CommonNotificationProps = Pick<NotificationData, "title" | "message">;
 

packages/spotlight/src/chip-group.tsx

@@ -1,5 +1,6 @@
+import { Chip } from "@mantine/core";
+
 import { useScopedI18n } from "@homarr/translation/client";
-import { Chip } from "@homarr/ui";
 
 import {
   selectNextAction,

packages/spotlight/src/component.tsx

@@ -2,23 +2,16 @@
 
 import { useCallback, useState } from "react";
 import Link from "next/link";
+import { Center, Chip, Divider, Flex, Group, Text } from "@mantine/core";
 import {
   Spotlight as MantineSpotlight,
   SpotlightAction,
 } from "@mantine/spotlight";
+import { IconSearch } from "@tabler/icons-react";
 import { useAtomValue } from "jotai";
 
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import {
-  Center,
-  Chip,
-  Divider,
-  Flex,
-  Group,
-  IconSearch,
-  Text,
-} from "@homarr/ui";
 
 import { GroupChip } from "./chip-group";
 import classes from "./component.module.css";

packages/spotlight/src/web-search-engines.ts

@@ -1,4 +1,4 @@
-import { IconDownload } from "@homarr/ui";
+import { IconDownload } from "@tabler/icons-react";
 
 import { useRegisterSpotlightActions } from "./data-store";
 

packages/ui/index.ts

@@ -1,8 +1,5 @@
 import type { Icon123 } from "@tabler/icons-react";
 
-export * from "@mantine/core";
-export * from "@mantine/dates";
-export * from "@tabler/icons-react";
 export * from "./src";
 
 export type TablerIcon = typeof Icon123;

packages/ui/package.json

@@ -33,11 +33,5 @@
       "@homarr/eslint-config/base"
     ]
   },
-  "prettier": "@homarr/prettier-config",
-  "dependencies": {
-    "@mantine/core": "^7.8.0",
-    "@mantine/dates": "^7.8.0",
-    "@tabler/icons-react": "^3.2.0",
-    "mantine-react-table": "2.0.0-beta.1"
-  }
+  "prettier": "@homarr/prettier-config"
 }

packages/widgets/src/_inputs/widget-app-input.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { memo, useMemo } from "react";
+import type { SelectProps } from "@mantine/core";
+import { Group, Loader, Select } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import type { SelectProps } from "@homarr/ui";
-import { Group, IconCheck, Loader, Select } from "@homarr/ui";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-location-input.tsx

@@ -2,19 +2,12 @@
 
 import type { ChangeEvent } from "react";
 import { useCallback } from "react";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import { createModal, useModalAction } from "@homarr/modals";
-import { useScopedI18n } from "@homarr/translation/client";
 import {
   ActionIcon,
   Anchor,
   Button,
   Fieldset,
   Group,
-  IconClick,
-  IconListSearch,
   Loader,
   NumberInput,
   Stack,
@@ -22,7 +15,13 @@ import {
   Text,
   TextInput,
   Tooltip,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconClick, IconListSearch } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import { createModal, useModalAction } from "@homarr/modals";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { OptionLocation } from "../options";
 import type { CommonWidgetInputProps } from "./common";

packages/widgets/src/_inputs/widget-multiselect-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { MultiSelect } from "@homarr/ui";
+import { MultiSelect } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-number-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { NumberInput } from "@homarr/ui";
+import { NumberInput } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-select-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Select } from "@homarr/ui";
+import { Select } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-slider-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { InputWrapper, Slider } from "@homarr/ui";
+import { InputWrapper, Slider } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-switch-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Switch } from "@homarr/ui";
+import { Switch } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/_inputs/widget-text-input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { TextInput } from "@homarr/ui";
+import { TextInput } from "@mantine/core";
 
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";

packages/widgets/src/app/component.tsx

@@ -1,20 +1,20 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-
-import { clientApi } from "@homarr/api/client";
-import { useRegisterSpotlightActions } from "@homarr/spotlight";
-import { useScopedI18n } from "@homarr/translation/client";
 import {
   Center,
   Flex,
-  IconDeviceDesktopX,
   Loader,
   Stack,
   Text,
   Tooltip,
   UnstyledButton,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconDeviceDesktopX } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useRegisterSpotlightActions } from "@homarr/spotlight";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import classes from "./app.module.css";

packages/widgets/src/app/index.ts

@@ -1,4 +1,4 @@
-import { IconApps } from "@homarr/ui";
+import { IconApps } from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";

packages/widgets/src/clock/component.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Flex, Stack, Text } from "@mantine/core";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import timezones from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 
-import { Flex, Stack, Text } from "@homarr/ui";
-
 import type { WidgetComponentProps } from "../definition";
 
 dayjs.extend(advancedFormat);

packages/widgets/src/clock/index.ts

@@ -1,7 +1,6 @@
+import { IconClock } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
-import { IconClock } from "@homarr/ui";
-
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";