wontondon/context-providers.tsx

## context-providers.tsx
'use client';

import React, { useState } from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { theme } from './theme';

export default function ContextProviders({
  children,
}: {
  children: React.ReactNode;
}) {

  return (
    <ChakraProvider theme={theme}>
        {children}
    </ChakraProvider>
  );
}

## layout.tsx
import ContextProviders from './context-providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <title>Example</title>
      </head>
      <body>
        <ContextProviders>{children}</ContextProviders>
      </body>
    </html>
  );
}

## page.tsx
'use client';

import { Box } from '@chakra-ui/react';

export default function Home() {
  return <Box bg="red.100">Example</Box>;
}
	import ContextProviders from './context-providers';

	export default function RootLayout({
	children,
	}: {
	children: React.ReactNode;
	}) {
	return (
	<html lang="en">
	<head>
	<title>Example</title>
	</head>
	<body>
	<ContextProviders>{children}</ContextProviders>
	</body>
	</html>
	);
	}
	'use client';

	import { Box } from '@chakra-ui/react';

	export default function Home() {
	return <Box bg="red.100">Example</Box>;
	}