photocn

Overview

photocn is a free, MIT-licensed photo editor for shadcn/ui, installed with the shadcn CLI. It can be added as one complete editor with every tool, assembled from individual pieces in a custom layout, or driven headlessly through the useImageEditorState hook. A plain JavaScript mode edits and exports photos without React.

It has two parts. The engine is the photocn npm package, which handles WebGL rendering in a background thread, filters, crop and rotate, EXIF, undo history and export. The editor UI is copied into components/image-editor/ and uses the project's theme and shadcn/ui components on Base UI, so engine fixes arrive through npm updates while the UI stays editable.

Features

• Adjustments: Light, color and effect controls.
• Curves: RGB and per-channel curves drawn over a live histogram.
• Filters: 13 filters, plus a filter picker and batch looks blocks.
• Crop and transform: Crop, straighten, perspective, rotate and flip, all reversible.
• Blur and blend: Lens blur and image blending tools.
• History: Undo and redo, and hold to compare with the original.
• Export: PNG, JPEG with EXIF preserved, and WebP at any size, with Display P3 color support.
• Ready-made blocks: Full, minimal and mobile editors, an avatar cropper, an upload editor and a before/after view.

Tech stack

• React, shadcn/ui, Base UI, Tailwind CSS
• WebGL engine (photocn npm package), lucide-react

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @photocn/component-name