Avatar

Represents a person as a square image tile that falls back to their initials.

Configurations

Supported configurations for this component.

ImageInitialsOnlineCautionFaultOffline

Default

Interaction states covered by the API and the style contract.

Hover

Configurations

6 examples
Image
sm
md
lg
Initials
sm
md
lg
Online
sm
md
lg
Caution
sm
md
lg
Fault
sm
md
lg
Offline
sm
md
lg

Default

1 example
Rest
Hover

Add to your project

One command adds this component to your project.

1

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

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

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

PropTypeDefaultDescription
namestring'?'Used to derive uppercase initials (shown when no src).
srcstring-Optional image URL. When provided, renders an img instead of initials.
lightSrcstring-Optional light-theme version of `src`, for a picture made for both themes. Both load and the Andromeda theme shows one: `src` in dark, `lightSrc` in light. Needs `src`; if it fails to load, `src` shows in both themes.
size'sm'|'md'|'lg''md'One of: sm, md, lg.
status'online'|'caution'|'fault'|'offline'-When set, renders a status dot.
classNamestring-Additional CSS classes merged onto the inner avatar box (the outer wrapper receives style and ...props).
styleReact.CSSProperties-Inline styles applied to the root element.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Badge

Displays the state a row or cell reports, such as online, queued, or fault.

8 variants

Button

Triggers an action or event, at the level of emphasis the action deserves.

6 variants6 states