AvatarPicker
v1.0.19Updated 19 Oct 2026Three-tab avatar picker: upload a file, generate from DiceBear HTTP API (10 styles), or paste an image URL. Falls back to hash-tinted initials.
Preview
Live · 8 stories▸Why this is recommendedformavatarpickerdicebear+2
AvatarPicker — popover trigger.
- ✓User profile avatar picker
- ✓Team-member avatar editor
- ✓Onboarding profile setup
- 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)
- ✕Generic file upload (use Upload / FileUpload)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
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
valueCurrent avatar
—onValueChangeChange callback
—nameName for initials fallback
—stylesEnabled DiceBear styles
—maxUploadBytesReject an upload larger than this. Default 5 MB, which is the number labels.uploadHint advertises and which nothing enforced before — a 900 MB file was accepted. The URL tab is http(s) only, as its error message has always said.
—labelsOverride built-in UI strings (tabs, section labels, placeholders, errors, aria-labels) for i18n
—