← All components Layout & primitives

Avatar

Image with deterministic letter fallback hashed from the name. delayMs avoids flash-of-fallback.

Inspired by Radix Avatar, Linear / Slack / Figma avatar conventions.

Preview

What it looks like.

SC DW MP QO

AvatarGroup with overflow

S D M +1

Usage

Drop it into your app.

import { Avatar } from '@locara/components'

<Avatar alt="Sarah Chen" size="md" />
<Avatar alt="Daniel Wong" src={user.avatarUrl} size="lg" />
<Avatar alt="Quinn O'Donnell" shape="square" />

Or copy the source into your repo: locara add avatar

Design notes

Why it works this way.

Background color is hashed from the alt text, so the same person always gets the same color. The Image only renders when it has loaded; until then (or on error), the fallback shows derived initials. `delayMs=300` avoids flashing the fallback on fast connections.