Avatar

Displays user profile images with fallback initials

Basic Usage

shadcn

@shadcn

SMMDLG

CNOnline status

U1U2U3

Team members

pnpm add @corew500/ui

import { Avatar } from "@corew500/ui/avatar"

<Avatar>Content</Avatar>

Axis	Values	Default
`size`	xssmdefaultlgxl2xl	default

Axis	Values	Default
`intent`	defaultprimarysecondaryaccentmuteddestructive	default

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

John DoeSoftware Engineer

CMS FieldsEN

Name

Role

Size

Use Avatar Image

Show Status Badge

Show as Group

This simulates how a content editor manages user avatars in Payload CMS. Initials are auto-generated from the name field.

Prop	Type	Default	Description
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`size`	enum	—	—