Docs

Install and migrate images in minutes

Replace one URL to start serving optimized images. No CDN configuration, no image pipelines, no format tuning.

The @prodkit/react package wraps the URL API in an Image component with automatic srcset, lazy loading, and format negotiation. Works with Vite, CRA, Remix, or any React setup.

Install and configure

Install the package, then wrap your app in ProdKitProvider with your project slug from the dashboard. Every Image below it resolves paths against your endpoint.

Example

pnpm add @prodkit/react

import { ProdKitProvider } from "@prodkit/react"

createRoot(document.getElementById("root")!).render(
  <ProdKitProvider project="acme">
    <App />
  </ProdKitProvider>,
)

Render an image

Pass props instead of query parameters. The component generates srcset variants, sets loading="lazy" by default, and reserves layout space from width and height.

Example

import { Image } from "@prodkit/react"

export function Avatar({ avatar }: { avatar: string }) {
  return <Image src={avatar} width={128} height={128} alt="Avatar" />
}

Migrate existing Supabase URLs

Image accepts full Supabase Storage URLs and rewrites them to your ProdKit endpoint, so you can migrate one component at a time.

Example

<Image
  src="https://xyz.supabase.co/storage/v1/object/public/avatars/cory.png"
  width={128}
  height={128}
  alt="Avatar"
/>

Reference

Image props

Every prop except src, project, and width is optional. buildImageUrl and buildSrcSet are available for custom components.

Parameter	Description	Values	Default
src	Image path within your project, or a full Supabase Storage URL to rewrite.	string	Required
project	Project slug from the dashboard. Can be passed through ProdKitProvider.	string	Required
imageBaseUrl	Custom image service base URL for self-hosted or preview environments.	absolute URL	https://img.prodkit.cloud
width	Rendered width in CSS pixels. Also caps the generated srcset variants.	1-4096	Required
height	Rendered height in CSS pixels.	1-4096	Auto from aspect ratio
quality	Compression quality.	1-100	82
fit	How the image fills the requested dimensions.	scale-down, contain, cover, crop, pad	scale-down
format	Output format. auto negotiates AVIF or WebP per browser.	auto, avif, webp, jpeg, png	auto

Claude Code integration

Agent migration checklist

A guided migration should feel like a small code review.

Detect Supabase

Install SDK

Rewrite image URLs

Create a commit