Avatar

Represents users through an image, initials, or icons. Ideal for profile displays, team lists, and user interactions.

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/Avatar

Usage

import { Avatar } from "@/components/display-ui/Avatar"

<Avatar.Root>
  <Avatar.Image
    src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="User Avatar"
  />
</Avatar.Root>

API

Avatar Props

For Avatar Root

Attribute	Type	Description	Default
children	`ReactNode`	Content placed inside the avatar container. Typically used to render the Avatar.Image component.	-
className	`string`	Additional CSS classes to customize the size, layout, or styling of the avatar container.	-

For Avatar Image

Attribute	Type	Description	Default
src	`string`	Source URL of the avatar image.	-
alt	`string`	Alternative text describing the avatar image for accessibility.	-
className	`string`	Additional CSS classes to customize the avatar image styling.	-

Examples

Default

Group Avatar

Group Avatar [Overlaped]

Credits

This component is inspired by Rehman Kalawant Design Shared On Github.

On this page