Components

Every piece is its own registry item. Installing one also installs what it depends on.

Components named ImageEditor* read the nearest provider and take no required props. Each panel file also exports a plain controlled version (value and onChange). Files are installed into components/image-editor/.

Image Editor

The complete photo editor: toolbar, canvas, tool switcher, histogram and every panel. Drop it in and go.

ImageEditorImageEditorStatusBadge

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

Layout

Resizable canvas + sidebar shell with an optional top toolbar.

ImageEditorLayout

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

Compact Layout

Phone layout: canvas first, a bottom tool bar, and panels in a bottom sheet that keeps the photo touchable.

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

Canvas

The image stage: crop frame and perspective corners in the crop tool; zoom, blur focus, drag-and-drop and hold-to-compare everywhere else.

ImageEditorCanvasImageEditorEmptyStateEditorCropWorkspacePerspectiveOverlayBlurCenterOverlay

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

Toolbar

Tool switcher plus undo, redo, open, reset and compare buttons.

ImageEditorToolbarImageEditorUndoButtonImageEditorRedoButtonImageEditorOpenButtonImageEditorResetButtonImageEditorCompareButtonEditorToolbar

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

Histogram

Live RGB histogram of the rendered image.

ImageEditorHistogram

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

Tool Panel

Renders the panel for the active tool; swap or add panels per tool.

ImageEditorToolPaneldefaultToolPanels

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

Panel Header

Shared title + reset header used by the panels.

PanelResetHeader

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

Adjustments

Light, color and effect sliders.

ImageEditorAdjustmentsAdjustmentPanel

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

Filters

LUT and color-matrix presets with a strength slider.

ImageEditorFiltersFiltersPanel

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

Curves

RGB and per-channel tone curves over a live histogram.

ImageEditorCurvesCurvesPanel

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

Blur

Bokeh and gaussian lens blur with a draggable focus point.

ImageEditorBlurBlurPanel

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

Crop

Quarter turns, flips, aspect ratios, straighten and perspective. Non-destructive: reopen and widen the crop any time.

ImageEditorCropCropPanel

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

Blend

Blend a second image into the photo.

ImageEditorBlendBlenderPanel

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

Metadata

File info and EXIF of the open image.

ImageEditorMetadataMetadataPanel

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

Export Dialog

Format, quality and output size; downloads or saves the result.

ImageEditorExportDialog

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

Recipes

Save a look as JSON and re-apply it to any photo.

ImageEditorRecipesRecipeActions

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

Devtools

Floating render stats for tuning the worker renderer.

ImageEditorDevtools

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