Avatar Picker

An interactive profile picture selector with file upload capabilities.

Profile setup

Make it yours

Choose a username and a color that sets the tone for your avatar.

Step 1 of 2

You're almost there

Avatar preview

This is how your avatar will appear across the app.

Avatar backgroundPick a color that fits your vibe

Username0/20

Tip: short, simple, and recognizable works best.

You can change this anytime from your profile settings.

bash

npm install motion lucide-react

tsx

import AvatarPicker from '@/components/ui/avatar-picker';

<AvatarPicker
  onComplete={() => {}}
  className=""
/>