shadcn.io is not affiliated with official shadcn/ui
Avatar Customizer Account Block for Solid
A designer for the initials avatar: a framed preview at three sizes and in an account chip, with initials, shape, one of eight neutral tones and a ring, saved or discarded in the page.
Installation
Overview
Let people design the avatar they get instead of uploading a photo, with this avatar designer for Solid with Ark UI. A hairline frame with a plus mark on each corner holds two cells, split by a divider. The first is a framed preview: the avatar at 64, 40 and 24 pixels, and inside an account chip with a name and an email, with a line in words saying what it is ("Initials IM, circle, Ink, ring off."). The second holds the controls: the initials in an Input (one or two letters, checked as you type), the shape in a Segment Group (circle, rounded, square), the tone as eight swatches, each named, and a Switch for a ring. The preview follows every change; the Shine Button saves the draft in the page and Discard puts the saved one back. This styles the avatar only: it does not touch the page's theme, and the tones are the theme's own neutrals, never a brand colour. It's built from Input, Segment Group, Switch, Field, Button, Shine Button and Guides, with a CSS entrance only. For the account page of any app that gives every member an avatar.
FAQ
Where do the tones come from?
From the theme: the foreground, a few mixes of the foreground into the background, the muted fill, the muted text colour and the plain background. They are written as literal classes in TONES, each with the text colour that passes contrast on it, so they follow the light and dark theme and every preset. A swatch is a native radio with its name under it and a tick when chosen, so colour is never the only signal.
What can the initials be?
One or two letters, in any alphabet, shown in capitals. Anything else is dropped as you type and the line under the field says "Letters only, one or two." An empty field is refused on Save with its reason, and focus goes back to the field.
What does the preview show?
The same avatar three times (64, 40 and 24 pixels) and once inside a chip like the one in an app's header, drawn with the draft, so a change is visible at every size at once. The ring is a gap in the stage's own colour and then a line in the text colour, so it reads on any tone.
What stays local, and how do I make it real?
Saving keeps the draft in this page only and says "Saved in this demo." in the foot; nothing is stored and a reload starts again. To make it real, send the initials, shape, tone and ring from save to your endpoint, keep the draft until it answers and show a failure in the status line. Render the avatar the same way wherever your app shows a member.
Is this the same as a theme editor?
No. A theme editor changes the colours of a whole workspace; this changes one member's avatar and nothing else on the page. The neutral tones are deliberate: they never compete with the page's one coloured button.
Is it accessible, and how does it look on a phone?
The controls are named (Initials, Shape, Tone, A ring around the avatar), the shape buttons and tone swatches work with the arrow keys and show a visible focus ring, the preview is drawn and its description is real text, and the foot is a polite live region. On a phone the preview comes first, then the controls, and the foot with Save stays pinned to the bottom of the screen.