105 Pro components and page blocks

Get Pro
uibrik

Aspect Crop

Pro

Preview

Customize

Shade0.55
Max zoom3.0×

Installation

Pro

Aspect Crop is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/aspect-crop

Usage

import { AspectCrop } from "@/components/uibrik/aspect-crop/aspect-crop";​const ratios = ["Original", "1:1", "4:5", "16:9", "9:16", "Custom"];​const alt = "Lone pine on a rock in an alpine lake below a ridge";​<AspectCrop  ratios={ratios}  grid  shade={0.55}  maxZoom={3}  src="/registry/aspect-crop/alpine-lake.webp"  alt={alt}  label="Crop"  onCropChange={(area, ratio) => {}}  // ratio="…"  // onRatioChange={(ratio) => {}}  // defaultRatio="…"/>

Props

AspectCrop
ratios
Type string[]
["Original","1:1","4:5","16:9","9:16","Custom"]
Ratios to offer: "w:h", "Original" for the photo's own shape, or "Custom" for a frame resized by its corner and edge handles.
grid
Type boolean
true
Rule-of-thirds lines while dragging, zooming or switching ratio.
shade
Type number
0.55
Darkness of the photo outside the frame.
maxZoom
Type number
3
How far pinch and plus can zoom in.
src / alt
Type string
demo photo
The photo to crop.
ratio / onRatioChange
Type string / (ratio) => void
–
Controlled ratio, one of ratios.
defaultRatio
Type string
first of ratios
Ratio on mount when uncontrolled.
onCropChange
Type (area: { x, y, width, height }, ratio) => void
–
Fires when a drag, zoom or ratio change settles, with the crop in the photo's own pixels.
label
Type string
"Crop"
Accessible name for the crop area.
className
Type string
–
Classes for the card.