Avatar

An avatar specifically refers to a character that represents an online user. Base theme present avatar in two shapes.

free

Playground

avatarUrl

shape

status

size

initials

HTML

<ply-avatar avatarUrl="assets/images/avatar1.jpeg" shape="circle" status="active" size="lg" initials="BU">Avatar</ply-avatar>

Default Avatar

Default Avatar examples below.

HTML

<ply-avatar avatarUrl="path/to/image.jpeg" size="md"></ply-avatar>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add avatar
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarComponent } from './avatar/avatar.component';

@Component({
  selector: 'app-avatar-example',
  imports: [
    AvatarComponent
  ],
  template: `...`
})
export class AvatarExampleComponent {}

Install

bash

npx ply-ui-cli add avatar

Avatar Shape

By default avatar component is with square shape with rounded borders. To make it circular use attribute shape="circle".

HTML

<ply-avatar avatarUrl="..." shape="circle"></ply-avatar>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add avatar
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarComponent } from './avatar/avatar.component';

@Component({
  selector: 'app-avatar-example',
  imports: [
    AvatarComponent
  ],
  template: `...`
})
export class AvatarExampleComponent {}

Install

bash

npx ply-ui-cli add avatar

Avatar Status

Use attribute status="..." to define user status. Base theme supports two statuses, "active" and "inactive".

HTML

<ply-avatar avatarUrl="..." status="active"></ply-avatar>
<ply-avatar avatarUrl="..." status="inactive"></ply-avatar>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add avatar
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarComponent } from './avatar/avatar.component';

@Component({
  selector: 'app-avatar-example',
  imports: [
    AvatarComponent
  ],
  template: `...`
})
export class AvatarExampleComponent {}

Install

bash

npx ply-ui-cli add avatar

Avatar Sizes

Base theme Avatar supports 5 sizes. Use size="" with supported "xs", "sm", "md", "lg" or "xl" to define avatar size. Or you can define the size manually by using tailwind class for width and height.

HTML

<ply-avatar avatarUrl="..." size="xs"></ply-avatar>
<ply-avatar avatarUrl="..." size="sm"></ply-avatar>
<ply-avatar avatarUrl="..." size="md"></ply-avatar>
<ply-avatar initials="LD" size="lg"></ply-avatar>
<ply-avatar avatarUrl="..." size="xl"></ply-avatar>
<!-- Custom size via Utility Classes -->
<ply-avatar avatarUrl="..." size="full" class="w-16 h-16 block"></ply-avatar>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add avatar
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarComponent } from './avatar/avatar.component';

@Component({
  selector: 'app-avatar-example',
  imports: [
    AvatarComponent
  ],
  template: `...`
})
export class AvatarExampleComponent {}

Install

bash

npx ply-ui-cli add avatar

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add avatar

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add avatar
// Paths are relative to aliases.components (default: src/app/components)
import { AvatarComponent } from './avatar/avatar.component';

@Component({
  selector: 'app-your-component',
  imports: [
    AvatarComponent
  ],
  template: `...`
})
export class YourComponent {}

API for avatar — generated from JSDoc in the library source.

API reference for avatar
API	Member	Type	Default	Description
`ply-avatar`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-avatar`	`avatarUrl`	`string \| undefined`	`''`	—
`ply-avatar`	`shape`	`AvatarShape`	`'square'`	—
`ply-avatar`	`status`	`AvatarStatus \| undefined`	`undefined`	—
`ply-avatar`	`size`	`AvatarSize`	`'md'`	—
`ply-avatar`	`initials`	`string`	`''`	—

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).