This component no longer exists. It was in diceui/base’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.

cropper-demo

diceui-base/cropper-demo

RemovedExample

diceui/base publishes no description for this item.

Install it

npx shadcn@latest add https://raw.githubusercontent.com/sadmann7/diceui/HEAD/docs/public/r/styles/base-vega/cropper-demo.json

Source

examples/cropper-demo.tsxraw.githubusercontent.com/sadmann7/diceui/HEAD/docs/public/r/styles/base-vega/cropper-demo.json

1"use client";
2 
3import * as React from "react";
4import {
5  Cropper,
6  CropperArea,
7  CropperImage,
8  type CropperPoint,
9} from "@/registry/bases/base/ui/cropper";
10 
11export default function CropperDemo() {
12  const [crop, setCrop] = React.useState<CropperPoint>({ x: 0, y: 0 });
13  const [zoom, setZoom] = React.useState(1);
14 
15  return (
16    <Cropper
17      aspectRatio={1}
18      crop={crop}
19      zoom={zoom}
20      onCropChange={setCrop}
21      onZoomChange={setZoom}
22      className="min-h-72"
23    >
24      <CropperImage
25        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80"
26        alt="Profile picture"
27        crossOrigin="anonymous"
28      />
29      <CropperArea />
30    </Cropper>
31  );
32}

What it pulls in

Other registry items

cropper

Files it writes

examples/cropper-demo.tsx