👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Account 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.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/account-avatar-upload-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/account-avatar-upload-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/account-avatar-upload-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/account-avatar-upload-01.jsonRelated blocks you will also like
Account Basic Information
Personal details and profile info
Account Appearance Settings
Theme and display preferences
Account Connected Accounts
Link social media accounts
Account Privacy Settings
Privacy and data control
Account Team Members
Team collaboration and roles
Account Security Settings
Password and 2FA management