build69
Sign inGet API key
build69  /  Components  /  Media & Files  /  AvatarPicker

AvatarPicker

v1.0.9Updated 27 Aug 2026

Three-tab avatar picker: upload a file, generate from DiceBear HTTP API (10 styles), or paste an image URL. Falls back to hash-tinted initials.

View source← Back to catalog

Preview

Live · 8 stories
PopoverTriggerOpen ↗
▸Why this is recommendedformavatarpickerdicebear+2

AvatarPicker — popover trigger.

Recommended for+14
  • ✓User profile avatar picker
  • ✓Team-member avatar editor
  • ✓Onboarding profile setup
Tags+6
formavatarpickerdicebearuploadpopovertrigger
Features+4
  • Three tabs: upload / DiceBear / URL
  • DiceBear styles (10 presets, HTTP API)
  • Initials fallback with swatches
  • Popover trigger or inline panel
  • Image cropping placeholder
  • i18n labels prop (AvatarPickerLabels — every built-in string overridable)
Not recommended for−2
  • ✕Generic file upload (use Upload / FileUpload)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "AvatarPicker" })

Usage

import { AvatarPicker } from '@/components/media/avatar-picker';

<AvatarPicker value={avatar} onValueChange={setAvatar} name="Palakorn" />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Current avatar

AvatarValue—
onValueChange

Change callback

function—
name

Name for initials fallback

string—
styles

Enabled DiceBear styles

DicebearStyle[]—
labels

Override built-in UI strings (tabs, section labels, placeholders, errors, aria-labels) for i18n

Partial<AvatarPickerLabels>—

Related

Platform docsAll componentsSource files