{"repo":"origin-space/image-cropper","free":true,"listed":false,"github":"https://github.com/origin-space/image-cropper","clone":"git clone https://github.com/origin-space/image-cropper.git","description":"A simple, composable, headless React component for interactive image cropping — inspired by the experience on X.","language":"TypeScript","stars":61,"topics":["nextjs","react","shadcn-ui","tailwindcss"],"license":"MIT","category":"ui-components","readme_excerpt":"React Image Cropper A simple, composable, headless React component for interactive image cropping — inspired by the experience on X . Features Headless & Composable: Provides building blocks ( Cropper.Root , Cropper.Image , Cropper.CropArea , Cropper.Description ) for full control over structure and styling. Interactive: Supports zooming (mouse wheel, pinch gesture) and panning (mouse drag, touch drag, arrow keys). Aspect Ratio: Enforces a specified aspect ratio for the crop area. Controlled/Uncontrolled: Manage zoom state internally or control it via props. Crop Calculation: Outputs precise pixel coordinates of the cropped area relative to the original image. Accessible: Designed with ARIA attributes and requires a description element for screen reader users. Customizable: Control zoom limits, sensitivity, padding, keyboard steps, and apply custom styles. Installation Usage Here's a basic example of how to use the Cropper primitive components: For more examples and integration with UI frameworks, check out the implementation on Origin UI. Origin UI Abstraction Origin UI provides a pre-styled component built on top of @origin-space/image-cropper . If you're using Origin UI or want a quicker setup, you can use this abstraction. Usage with Abstraction Using the Origin UI abstraction simplifies the markup: Components Cropper.Root : The main container and controller. It handles logic, state, and interactions. Cropper.Image : Renders the actual tag. It's positioned and scaled by C","default_branch":null,"files":null,"tree":[],"storefront":"/r/origin-space","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/origin-space/image-cropper/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}