Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Account Block Avatar Upload
Profile avatar upload with image preview, drag-and-drop support, file validation, crop functionality, and remove/replace options
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Managing profile pictures shouldn't be complicated. This React avatar upload component handles drag-and-drop files, shows live previews, validates image types and sizes, and lets users crop before saving. Built with shadcn/ui Card, Avatar, Button, Alert, and Input components with Lucide React icons, users can upload via click or drag, see immediate previews, and remove unwanted images. File size warnings, format validation, and fallback initials—perfect for user profiles, account settings, or any app where profile customization improves engagement and personalization.
Profile Picture
Upload a profile picture to personalize your account
Recommended: Square image, at least 400x400px
Drop your image here
or
Installation
Related blocks you will also like
React Account Block Basic Information
Personal details and profile info
React Account Block Appearance Settings
Theme and display preferences
React Account Block Connected Accounts
Link social media accounts
React Account Block Privacy Settings
Privacy and data control
React Account Block Team Members
Team collaboration and roles
React Account Block Security Settings
Password and 2FA management
Questions you might have
React Account Block Appearance Settings
Appearance and display settings with theme selector, language preferences, and interface customization options
React Account Block Backup Codes
Two-factor authentication backup codes with generation, display, download, print, and regeneration functionality for account recovery