Creating the Registry Provider

In providers/atom-registry-provider.tsx, add the following code:

1
"use client";
2

3
import { ReactNode } from "react";
4
import { RegistryProvider } from "@effect-atom/atom-react";
5

6
export function AtomRegistryProvider({ children }: { children: ReactNode }) {
7
  return <RegistryProvider>{children}</RegistryProvider>;
8
}

We import RegistryProvider and wrap the children prop with it. When RegistryProvider renders, it creates a Registry instance and makes it available to the entire component tree through React Context.

We also explicitly mark this file with "use client" because the Registry relies on React Context and hooks to manage state updates, which are client-side features.