---
title: Basic usage
description: Add the stylesheet source and create an interactive image cropper.
order: 10
toc:
  - id: stylesheet
    title: Stylesheet
  - id: cropper
    title: Cropper
  - id: controls
    title: External controls
---

## Stylesheet {#stylesheet}

Add the package source to the application's Tailwind stylesheet:

```css
@import "@workspace/cropper/globals.css";
```

## Cropper {#cropper}

Use classes or pass `width` and `height` directly. `aspectRatio` accepts a number or a `"width:height"` string:

```tsx
import { Cropper, type CropArea } from "@workspace/cropper"

function ProductImageCropper({ src }: { src: string }) {
  const [area, setArea] = React.useState<CropArea>()

  return (
    <Cropper
      src={src}
      alt="Product"
      aspectRatio="4:3"
      className="w-full max-w-xl rounded-xl"
      onCropAreaChange={setArea}
    />
  )
}
```

Users can drag the image, scroll to zoom, or focus the Cropper and use the arrow, `+`, `-`, `0`, and `Home` keys.

`src` can also be a `Blob` or `File` from a file picker. The component creates a temporary object URL and revokes it when the source changes or the component unmounts.

## External controls {#controls}

Control the crop with `value` and `onValueChange` to connect a Slider. For a quick reset, call `reset()` on the component ref. `minZoom` is clamped to at least `1`, ensuring that the image always covers the viewport.