Installation & details
Image Upload Crop Editor by Shadcnspace. A circular image upload widget that lets users drag-and-drop or browse a photo, then zoom, pan and rotate it before confirming a cropped preview. Try the live React demo, inspect the original source, and install from PODIE.
React · Tailwind CSS · MIT license · Original registry
Added to PODIE · Catalog updated · Page updated
Installation and usage
The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.
01 — Set up your project
First component? Initialize shadcn once.
pnpm dlx shadcn@latest init02 — Install the component
pnpm dlx shadcn@latest add https://podie.dev/r/shadcnspace--file-upload-05.json03 — Add it to your interface
Import the component from the path created by the installer.
'use client';
import EffectFileUpload05 from '@/components/podie/shadcnspace--file-upload-05/demo';
export default function Example() {
return (
<div style={{ width: '100%', height: '100vh' }}>
<EffectFileUpload05 />
</div>
);
}
Example styling
These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.
.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }Dependencies and distribution
clsx, tailwind-merge, lucide-react@0.468.0, react-dropzone, @radix-ui/react-slot, @radix-ui/react-slider, class-variance-authority The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.
By Shadcnspace · MIT license. Original component source and license included.
Choosing and integrating this component
PODIE source review ·
Where it fits
Crop a profile photo in the browser before sending it to your application. The editor supports drag-and-drop, zoom, pan and quarter-turn rotation. Confirming creates a circular crop in a 320 × 320 PNG data URL; it does not upload the photo.
Integration boundary
Native React source. The supplied FileUpload component keeps the result in local state and exposes no upload callback. Add a result callback or adapt confirmCrop, then connect your own storage request, loading state and error handling.
Checks before shipping
Give the zoom slider thumb an accessible name; the supplied label is on its wrapper. Validate file size and decoding failures, and release temporary object URLs when replacing a photo. Test touch panning and portrait/landscape crops.
Recorded verification
Not included in the October 1 four-package-manager installation sample. This note records source inspection, not a new compatibility or device test. Read the method and limitations.
No component-specific mobile performance or assistive-technology pass is claimed here. Test the final page, including its content, theme and application logic.
Reviewed source identity
Registry SHA-256: 070623344211a86150e7047f95b6eb213bd4abc3e9164a6e6acea0927fbaf930
Entry file: components/podie/shadcnspace--file-upload-05/components/shadcn-space/file-upload/file-upload-05.tsx. 12 files in the registry payload.