@mantine/colors-generator Usage with NextJS Server Components #7518

creativeindustriesgroup · 2025-02-22T19:14:10Z

creativeindustriesgroup
Feb 22, 2025

Request to Make `generateColors()` Usable in Server Components

Hello Mantine Team,

I am building a multi-tenant application using Next.js (App Router) and Mantine UI. According to the documentation, all Mantine components rely on React Context, making them incompatible with Server Components. This makes sense for most cases. However, I believe that certain utility functions, such as generateColors(), do not require the 'use client'; directive and could be made available for Server Components.

Use Case & Issue

In my project, I need to dynamically configure the Mantine theme based on tenant-specific settings stored in a database. This setup requires fetching tenant data at the root level and defining the theme accordingly.

Example Code:

'use server'; // Required for async operations  

export default async function RootLayout({ children }: { children: React.ReactNode }) {
	const currentTenant = await get(); // Fetch current tenant from DB  

	const setPrimaryColor = () => {
		const colorScheme = currentTenant.colorScheme;
		const customColor = currentTenant.customColor;

		// Generate a primary color based on tenant settings  
		if (customColor) {
			return {
				colors: {
					primary: generateColors(customColor), // ❌ Not usable in a Server Component  
				},
				primaryColor: "primary",
			};
		} else { 
			return {
				primaryColor: colorScheme,
			};
		}
	};

	const theme = createTheme({
		...setPrimaryColor(),
	});

	return (
		<html lang="en">
			<head>
				<ColorSchemeScript />
				{/* Other head elements */}
			</head>
			<body>
				<MantineProvider theme={theme}>
					<DataProvider currentTenant={currentTenant}>
						{children}
					</DataProvider>
				</MantineProvider>
			</body>
		</html>
	);
}

The Problem:

generateColors() is currently marked with 'use client';, making it unusable in a Server Component.
However, from my understanding, generateColors() does not rely on React Context or client-side state.
As a result, the @mantine/colors-generatorlibrary itself appears to be Server Component-compatible, but this restriction forces unnecessary workarounds.

Request

Would it be possible to remove the 'use client'; directive from utility functions like generateColors() (or move them into a separate, server-compatible package)? This change would allow developers to use these functions in Server Components without unnecessary workarounds.

Let me know your thoughts, and thanks for all your work on Mantine! 🚀

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mantine

@mantine/colors-generator Usage with NextJS Server Components #7518

{{title}}

Replies: 0 comments

Select a reply

Mantine

@mantine/colors-generator Usage with NextJS Server Components #7518

creativeindustriesgroup Feb 22, 2025

Request to Make generateColors() Usable in Server Components

Use Case & Issue

Example Code:

The Problem:

Request

Replies: 0 comments

creativeindustriesgroup
Feb 22, 2025

Request to Make `generateColors()` Usable in Server Components