Image Crop Presets component
Install
npx shadcn add https://ui.happenings.social/r/image-crop-presets.json
Or with namespace
npx shadcn add @happenings/image-crop-presets
Preview
Registry block: preset aspect ratios (1:1, 16:9, 4:3) for the image crop dialog.
Registry dependencies
src/components/image-crop-presets.tsx
import type { CropConfig } from "./image-crop-dialog";
export const CROP_PRESETS = {
EVENT_COVER: { aspect: 16 / 9, cropShape: "rect" } satisfies CropConfig,
PAGE_COVER: { aspect: 16 / 9, cropShape: "rect" } satisfies CropConfig,
USER_COVER: { aspect: 16 / 9, cropShape: "rect" } satisfies CropConfig,
AVATAR: { aspect: 1, cropShape: "round" } satisfies CropConfig,
PAGE_LOGO: { aspect: 1, cropShape: "round" } satisfies CropConfig,
FREE: { aspect: undefined, cropShape: "rect" } satisfies CropConfig,
} as const;