# Image cropper (UI SDK): Disabled

> A disabled cropper can’t be focused or changed, and its zoom and buttons are disabled.

Canonical: https://hextaui.com/docs/ui-sdk-image-cropper/examples/disabled

Component docs: https://hextaui.com/docs/ui-sdk-image-cropper

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-image-cropper-disabled.json
```

This adds `components/examples/ui-sdk-image-cropper/disabled.tsx` with the Image cropper component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-image-cropper/disabled.tsx"
import {
  ImageCropper,
  ImageCropperHandles,
  ImageCropperImage,
  ImageCropperRotate,
  ImageCropperSelection,
  ImageCropperViewport,
  ImageCropperZoom,
} from "@/components/ui/ui-sdk-image-cropper"

const photo =
  "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=1200&q=80&auto=format&fit=crop"

function UiSdkImageCropperDisabled() {
  return (
    <ImageCropper
      aria-label="Photo"
      src={photo}
      aspectRatio={16 / 9}
      disabled
      className="max-w-md"
    >
      <ImageCropperViewport>
        <ImageCropperImage alt="A rowing boat on a green mountain lake" />
        <ImageCropperSelection>
          <ImageCropperHandles />
        </ImageCropperSelection>
      </ImageCropperViewport>
      <div className="flex items-center gap-2">
        <ImageCropperZoom />
        <ImageCropperRotate />
      </div>
    </ImageCropper>
  )
}

export { UiSdkImageCropperDisabled }
```

## Props in this example

### ImageCropper

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` | `string` | – |  |
| `aspectRatio` | `number` | – |  |
| `disabled` | `boolean` | `false` |  |

### ImageCropperImage

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `alt` | `string` | – | Required. |

## More Image cropper examples

- [Avatar](https://hextaui.com/docs/ui-sdk-image-cropper/examples/avatar)
- [Rotate and flip](https://hextaui.com/docs/ui-sdk-image-cropper/examples/rotate-flip)
- [Upload](https://hextaui.com/docs/ui-sdk-image-cropper/examples/upload)
- [Controller](https://hextaui.com/docs/ui-sdk-image-cropper/examples/controlled)