Avatar
User profile picture with auto-generated initials and deterministic color coding.
With Initials
Automatically generates initials from the name and picks a consistent background color.
J
C
Z
A
B
Sizes
Avatars scale from 24px to 64px to fit different contexts.
A
24px
B
32px
C
40px
D
48px
E
64px
Profile Card
Combine avatars with names and badges in a card layout.
J
Juste A.
AdminCEO, ZeroSuite
User List
Avatars in list items with roles and badges.
J
Juste A.
AdminCEO
C
Claude
AICTO
A
Ada L.
ActiveEngineer
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | text | "" | Name (first letter used as initial) |
size | text | "40" | Diameter in pixels |
src | text | "" | Image URL (overrides initials) |