@photocn
The photo editor for shadcn/ui. Typed React components on a WebGL engine: adjustments, curves, filters, crop and transform, export. Add the whole editor with one command, or compose your own.
Install this registry
npx shadcn@latest add https://photocn.dev/r/registry.json pnpm dlx shadcn@latest add https://photocn.dev/r/registry.json bunx shadcn@latest add https://photocn.dev/r/registry.json curl -s https://photocn.dev/r/registry.json Components
27 totalThe complete photo editor: toolbar, canvas, tool switcher, histogram and every panel. Drop it in and go.
npx shadcn@latest add https://photocn.dev/r/image-editor.json Resizable canvas + sidebar shell with an optional top toolbar.
npx shadcn@latest add https://photocn.dev/r/image-editor-layout.json Phone layout: canvas first, a bottom tool bar, and panels in a bottom sheet that keeps the photo touchable.
npx shadcn@latest add https://photocn.dev/r/image-editor-compact-layout.json The image stage: crop frame and perspective corners in the crop tool; zoom, blur focus, drag-and-drop and hold-to-compare everywhere else.
npx shadcn@latest add https://photocn.dev/r/image-editor-canvas.json Tool switcher plus undo, redo, open, reset and compare buttons.
npx shadcn@latest add https://photocn.dev/r/image-editor-toolbar.json Live RGB histogram of the rendered image.
npx shadcn@latest add https://photocn.dev/r/image-editor-histogram.json Renders the panel for the active tool; swap or add panels per tool.
npx shadcn@latest add https://photocn.dev/r/image-editor-tool-panel.json Shared title + reset header used by the panels.
npx shadcn@latest add https://photocn.dev/r/image-editor-panel-header.json Light, color and effect sliders.
npx shadcn@latest add https://photocn.dev/r/image-editor-adjustments.json LUT and color-matrix presets with a strength slider.
npx shadcn@latest add https://photocn.dev/r/image-editor-filters.json RGB and per-channel tone curves over a live histogram.
npx shadcn@latest add https://photocn.dev/r/image-editor-curves.json Bokeh and gaussian lens blur with a draggable focus point.
npx shadcn@latest add https://photocn.dev/r/image-editor-blur.json Quarter turns, flips, aspect ratios, straighten and perspective. Non-destructive: reopen and widen the crop any time.
npx shadcn@latest add https://photocn.dev/r/image-editor-crop.json Blend a second image into the photo.
npx shadcn@latest add https://photocn.dev/r/image-editor-blend.json File info and EXIF of the open image.
npx shadcn@latest add https://photocn.dev/r/image-editor-metadata.json Format, quality and output size; downloads or saves the result.
npx shadcn@latest add https://photocn.dev/r/image-editor-export.json Save a look as JSON and re-apply it to any photo.
npx shadcn@latest add https://photocn.dev/r/image-editor-recipes.json Cmd+K palette for tools, history and filters.
npx shadcn@latest add https://photocn.dev/r/image-editor-command-menu.json Floating render stats for tuning the worker renderer.
npx shadcn@latest add https://photocn.dev/r/image-editor-devtools.json The full editor, filling the screen, with a ⌘K command menu.
npx shadcn@latest add https://photocn.dev/r/editor.json Adjust, filters and crop, plus export. Nothing else.
npx shadcn@latest add https://photocn.dev/r/editor-minimal.json Photo first, tools at the bottom, controls in a sheet.
npx shadcn@latest add https://photocn.dev/r/editor-mobile.json Pick a photo, frame it in a square, save a 512px avatar.
npx shadcn@latest add https://photocn.dev/r/avatar-cropper.json Drop a photo, edit it, then upload the result.
npx shadcn@latest add https://photocn.dev/r/upload-editor.json A phone-style row of looks with a strength slider.
npx shadcn@latest add https://photocn.dev/r/filter-picker.json Drag to compare the original with the edit.
npx shadcn@latest add https://photocn.dev/r/before-after.json Choose one look and apply it to many photos at once.
npx shadcn@latest add https://photocn.dev/r/batch-looks.json