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.
BMInstallation
You can add this avatar component using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
CLI
Manual
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add avatarSizes
Four sizes via the size prop - xs (20px) through lg (36px). The initials type scale follows the container.
<Avatar size="xs" initials="M" /> {/* 20px */}<Avatar size="sm" initials="M" /> {/* 24px */}<Avatar size="md" initials="M" /> {/* 32px */}<Avatar size="lg" initials="M" /> {/* 36px */}Initial tints
Initials render on a neutral or blue surface via the color prop.
<Avatar color="neutral" initials="M" /> {/* neutral surface */}<Avatar color="blue" initials="B" /> {/* blue tint */}Photo
Pass src and alt for a photo avatar. Initials act as the fallback while the image loads or if it fails.
{/* Photo avatars take a src + alt; initials are the fallback */}<Avatar size="md" src="/avatars/livia-saris.webp" alt="Livia Saris" />