Avatar

Avatar

An image element used to represent a user or entity, typically displayed as a circular or square thumbnail. Can fall back to initials or an icon when no image is provided.

Installation

Required Component

This component depends on Field. Make sure you have installed and configured it before using this component.

Field

The Field component is fundamental and used by many other components. It applies consistent, reusable styles and appears in inputs, labels, descriptions, and other related elements.

Install following dependencies:

npm install tw-animate-css clsx tailwind-merge class-variance-authority

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

TypeScript

JavaScript

lib/utils.ts

Copy and paste the following code into your project.

TypeScript

JavaScript

components/ui/core/avatar.tsx

npx libravelui@latest add avatar

Anatomy

import { Avatar } from "@/components/ui/core/avatar";

<Avatar src="avatar-src" alt="avatar-alt" />

Another Examples

Initials

Displays an avatar using user initials when no profile image is available. This ensures consistent styling and fallback behavior while still giving a personalized touch with capitalized initials.

Usage

Displays a group of avatars representing multiple users. Each avatar can show either a profile image or fallback initials if the image is not available. Avatar groups are commonly used in collaborative interfaces, team listings, or messaging apps.

Usage

Props

Loading types…

AvatarCopy MarkdownOpen

Example