Avatar

Square tile in 3 sizes. Shows an image when src is provided, with a fallback to initials; optional status bar in 4 states.

Sizes

With status

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/andromeda-avatar

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
name	`string`	'?'	Used to derive uppercase initials (shown when no src).
src	`string`	-	Optional image URL. When provided, renders an img instead of initials.
size	`'sm'\|'md'\|'lg'`	'md'	One of: sm, md, lg.
status	`'online'\|'caution'\|'fault'\|'offline'`	-	When set, renders a status dot.
className	`string`	-	Additional CSS classes merged onto the inner avatar box (the outer wrapper receives style and ...props).
style	`React.CSSProperties`	-	Inline styles applied to the root element.