Avatar

Avatar shows src when it loads and renders children as the fallback. Use size from sm to xl and shape="circle" or "square".

import { Avatar } from '@manti-ui/react';

export default function AvatarBasic() {
  return (
    <div className="flex gap-4 items-center">
      <Avatar
        src="https://avatars.githubusercontent.com/u/72797914?v=4"
        alt="A person"
        size="sm"
      >
        MU
      </Avatar>
      <Avatar
        src="https://avatars.githubusercontent.com/u/72797914?v=4"
        alt="A person"
        size="md"
      >
        MU
      </Avatar>
      <Avatar
        src="https://avatars.githubusercontent.com/u/72797914?v=4"
        alt="A person"
        size="lg"
      >
        MU
      </Avatar>
      <Avatar
        src="https://avatars.githubusercontent.com/u/72797914?v=4"
        alt="A person"
        size="xl"
      >
        MU
      </Avatar>
    </div>
  );
}

Fallback and shape

MUAY

API

Prop	Type	Default	Description
`src`	`string`	—	Image source. Empty/whitespace values are treated as missing and fall back to children.
`alt`	`string`	`''`	Alt text for the image.
`children`	`ReactNode`	—	Fallback content — typically initials.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Visual size.
`shape`	`'circle' \| 'square'`	`'circle'`	Outline shape.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="avatar"][data-part="root"]`	The element clipping the image to its shape.
`image`	`[data-scope="avatar"][data-part="image"]`	The loaded image, shown when `src` resolves.
`fallback`	`[data-scope="avatar"][data-part="fallback"]`	The initials/children shown while loading or on failure.

Tokens

Token	Controls
`--manti-avatar-size`	size
`--manti-avatar-radius`	radius

Last updated 13 September 2026