Avatar
A photo or initials avatar in four sizes (20 / 24 / 32 / 36px) with neutral and blue initial tints - used across tables, breadcrumbs, menus, and the sidebar.
Installation
You can add this avatar component using our CLI or manually:
Dark mode ready - this component follows Ethereal UI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx @etherealui/cli@latest add avatar
Sizes
Four standard sizes (20px xs, 24px sm, 32px default, and 36px lg) for dense tables or profile headers.
B
B
B
B
Initial tints
Use neutral, blue, emerald, or amber tints when a user photo is unavailable.
M
B
E
A
Photo & Avatar Group
Stack multiple avatars with an automatic overflow counter.
B
M
E
+1