@usedetach/react

The React renderer for Detach content: a registry mapping component definitions to your components, a region renderer, and the preview bridge the editor talks to.

npm install @usedetach/react

import { createRegistry, CmsRegions } from "@usedetach/react";

const registry = createRegistry(sectionEntries);

export default function Page({ page }) {
  return <CmsRegions registry={registry} regions={page.regions} />;
}

Also here: CmsImage (art direction, focal point, per-breakpoint overlays — pair it with your app's cms-image.css), CmsFrame (per-section spacing and background), and the context providers CmsPreviewProvider, CmsVisitorProvider, CmsResourceProvider, CmsLoaderProvider with the CmsPreviewBar.

Peer dependencies: react and react-dom 18 or 19.