Installation

1. Set up shadcn/ui

The components use the Radix flavor of shadcn/ui (asChild, Radix slider and select APIs). New projects default to Base UI, so pick Radix when you initialize:

pnpm dlx shadcn@latest init -b radix

2. Add the editor

This installs the photocn engine from npm, the shadcn primitives the editor uses, and the editor components into components/image-editor/.

pnpm dlx shadcn@latest add https://photocn.dev/r/image-editor.json

To use a short name like @photocn/image-editor, add the registry to your components.json:

{
  "registries": {
    "@photocn": "https://photocn.dev/r/{name}.json"
  }
}

3. Use it

import { ImageEditor } from "@/components/image-editor/image-editor";

export default function Page() {
  return <ImageEditor className="h-dvh" src="/photo.jpg" />;
}

The editor is a client component. src accepts a URL, File, Blob, ArrayBuffer or an <img>. Remote URLs must allow CORS.

Only need some pieces?

Every piece is its own item. Install just the ones you use:

pnpm dlx shadcn@latest add https://photocn.dev/r/image-editor-canvas.json https://photocn.dev/r/image-editor-filters.json https://photocn.dev/r/image-editor-export.json

Content-Security-Policy

The render worker is inlined and started from a blob: URL, so it needs no bundler setup. If your CSP forbids worker-src blob:, spawn the worker file yourself:

<ImageEditor
  src={src}
  spawnWorker={() =>
    new Worker(new URL("photocn/worker/entry", import.meta.url), { type: "module" })
  }
/>