# Image cropper (UI SDK): Rotate and flip

> `ImageCropperRotate` turns the image a quarter clockwise and `ImageCropperFlip` mirrors it. Without children they’re icon buttons with English labels.

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

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-rotate-flip.json
```

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

## Source

```tsx title="components/examples/ui-sdk-image-cropper/rotate-flip.tsx"
import {
  ImageCropper,
  ImageCropperFlip,
  ImageCropperGrid,
  ImageCropperHandles,
  ImageCropperImage,
  ImageCropperRotate,
  ImageCropperSelection,
  ImageCropperViewport,
} 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 UiSdkImageCropperRotateFlip() {
  return (
    <ImageCropper
      aria-label="Photo"
      src={photo}
      aspectRatio={4 / 5}
      className="max-w-sm"
    >
      <ImageCropperViewport>
        <ImageCropperImage alt="A rowing boat on a green mountain lake" />
        <ImageCropperSelection>
          <ImageCropperGrid />
          <ImageCropperHandles />
        </ImageCropperSelection>
      </ImageCropperViewport>
      <div className="flex gap-2">
        <ImageCropperRotate />
        <ImageCropperFlip />
        <ImageCropperFlip direction="vertical" />
      </div>
    </ImageCropper>
  )
}

export { UiSdkImageCropperRotateFlip }
```

## Props in this example

### ImageCropper

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

### ImageCropperImage

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

### ImageCropperFlip

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `direction` | `"horizontal" \| "vertical"` | `"horizontal"` |  |

## More Image cropper examples

- [Avatar](https://hextaui.com/docs/ui-sdk-image-cropper/examples/avatar)
- [Upload](https://hextaui.com/docs/ui-sdk-image-cropper/examples/upload)
- [Controller](https://hextaui.com/docs/ui-sdk-image-cropper/examples/controlled)
- [Disabled](https://hextaui.com/docs/ui-sdk-image-cropper/examples/disabled)