---
name: "@photocn"
slug: "photocn"
description: "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."
category: "Forms"
tags: ["3d", "developer-tools", "editor", "forms", "media", "mobile", "navigation"]
framework: "react"
license: "MIT"
author: "rbbydotdev"
website: "https://photocn.dev"
github: "https://github.com/rbbydotdev/photocn"
registry: "https://photocn.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 4
component_count: 27
generated_at: "2026-10-10T06:32:55.998Z"
---

# @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.

## Links

- Website: https://photocn.dev
- GitHub: https://github.com/rbbydotdev/photocn
- Registry JSON: https://photocn.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/photocn
- This file: https://sh4dcn.vercel.app/md/photocn.md

## Install

```sh
# add the whole registry (shadcn CLI)
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
# clone the source repo
git clone https://github.com/rbbydotdev/photocn.git
# fetch the raw registry index
curl -s https://photocn.dev/r/registry.json
```

## Components (27)

| name | type | description | install |
| --- | --- | --- | --- |
| image-editor | registry:block | The 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` |
| image-editor-layout | registry:component | Resizable canvas + sidebar shell with an optional top toolbar. | `npx shadcn@latest add https://photocn.dev/r/image-editor-layout.json` |
| image-editor-compact-layout | registry:component | 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` |
| image-editor-canvas | registry:component | 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` |
| image-editor-toolbar | registry:component | Tool switcher plus undo, redo, open, reset and compare buttons. | `npx shadcn@latest add https://photocn.dev/r/image-editor-toolbar.json` |
| image-editor-histogram | registry:component | Live RGB histogram of the rendered image. | `npx shadcn@latest add https://photocn.dev/r/image-editor-histogram.json` |
| image-editor-tool-panel | registry:component | 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` |
| image-editor-panel-header | registry:component | Shared title + reset header used by the panels. | `npx shadcn@latest add https://photocn.dev/r/image-editor-panel-header.json` |
| image-editor-adjustments | registry:component | Light, color and effect sliders. | `npx shadcn@latest add https://photocn.dev/r/image-editor-adjustments.json` |
| image-editor-filters | registry:component | LUT and color-matrix presets with a strength slider. | `npx shadcn@latest add https://photocn.dev/r/image-editor-filters.json` |
| image-editor-curves | registry:component | RGB and per-channel tone curves over a live histogram. | `npx shadcn@latest add https://photocn.dev/r/image-editor-curves.json` |
| image-editor-blur | registry:component | Bokeh and gaussian lens blur with a draggable focus point. | `npx shadcn@latest add https://photocn.dev/r/image-editor-blur.json` |
| image-editor-crop | registry:component | 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` |
| image-editor-blend | registry:component | Blend a second image into the photo. | `npx shadcn@latest add https://photocn.dev/r/image-editor-blend.json` |
| image-editor-metadata | registry:component | File info and EXIF of the open image. | `npx shadcn@latest add https://photocn.dev/r/image-editor-metadata.json` |
| image-editor-export | registry:component | Format, quality and output size; downloads or saves the result. | `npx shadcn@latest add https://photocn.dev/r/image-editor-export.json` |
| image-editor-recipes | registry:component | Save a look as JSON and re-apply it to any photo. | `npx shadcn@latest add https://photocn.dev/r/image-editor-recipes.json` |
| image-editor-command-menu | registry:component | Cmd+K palette for tools, history and filters. | `npx shadcn@latest add https://photocn.dev/r/image-editor-command-menu.json` |
| image-editor-devtools | registry:component | Floating render stats for tuning the worker renderer. | `npx shadcn@latest add https://photocn.dev/r/image-editor-devtools.json` |
| editor | registry:block | The full editor, filling the screen, with a ⌘K command menu. | `npx shadcn@latest add https://photocn.dev/r/editor.json` |
| editor-minimal | registry:block | Adjust, filters and crop, plus export. Nothing else. | `npx shadcn@latest add https://photocn.dev/r/editor-minimal.json` |
| editor-mobile | registry:block | Photo first, tools at the bottom, controls in a sheet. | `npx shadcn@latest add https://photocn.dev/r/editor-mobile.json` |
| avatar-cropper | registry:block | Pick a photo, frame it in a square, save a 512px avatar. | `npx shadcn@latest add https://photocn.dev/r/avatar-cropper.json` |
| upload-editor | registry:block | Drop a photo, edit it, then upload the result. | `npx shadcn@latest add https://photocn.dev/r/upload-editor.json` |
| filter-picker | registry:block | A phone-style row of looks with a strength slider. | `npx shadcn@latest add https://photocn.dev/r/filter-picker.json` |
| before-after | registry:block | Drag to compare the original with the edit. | `npx shadcn@latest add https://photocn.dev/r/before-after.json` |
| batch-looks | registry:block | Choose one look and apply it to many photos at once. | `npx shadcn@latest add https://photocn.dev/r/batch-looks.json` |

## For AI agents

```text
You are adding components from @photocn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/photocn.md) for the component list.
2. Fetch the machine-readable index: https://photocn.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: photocn).
```