React Dialog Block Profile Picture

Update profile pictures with multiple upload methods. This React profile picture dialog provides drag and drop file upload, camera capture option for webcam photos, choose from gallery file picker, current photo preview with remove option, and image format and size validation. Built with shadcn/ui Dialog, Button, Avatar, and Alert components using Tailwind CSS, users update their profile image easily. Drag photo, use camera, or browse files—perfect for user profiles, account settings, team member management, or any Next.js application requiring profile picture uploads with a polished multi-option interface.

React Dialog Block Profile Picture preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-profile-picture.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-profile-picture.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-profile-picture.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-profile-picture.json

Related Components

FAQ