Blocks

Ready-made photo editors. Preview them, then add one to your app with a single command.

Until @photocn is listed in the shadcn registry directory, add it to your components.json once:

{
  "registries": {
    "@photocn": "https://photocn.dev/r/{name}.json"
  }
}

Or run pnpm dlx shadcn@latest registry add @photocn=https://photocn.dev/r/{name}.json.

Editor

The full editor, filling the screen, with a ⌘K command menu.

Adjust, filters and crop, plus export. Nothing else.

Photo first, tools at the bottom, controls in a sheet.

Pick a photo, frame it in a square, save a 512px avatar.

Drop a photo, edit it, then upload the result.

A phone-style row of looks with a strength slider.

Drag to compare the original with the edit.

Choose one look and apply it to many photos at once.