Display

Avatar

User avatar with image, initials, or icon fallback.

Available inreactangular

Preview

Live previewreal component

Install

TerminalBash

$ npx mcp-elements add avatar

Usage

avatar-example.tsxTSX

import { Avatar } from '@mcp-elements/react'

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Avatar src="https://github.com/anthropics.png" alt="Anthropic" fallback="AN" />
      <Avatar fallback="MB" />
    </div>
  )
}

Props

Prop	Type	Default	Description
`src`	`string`	—	Image URL; falls back to `fallback` text if it fails to load
`alt`	`string`	—	Alt text for the avatar image
`fallback`	`string`	—	Text (usually initials) shown when there is no image or it fails to load
`className`	`string`	—	Additional CSS classes