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.
Example
Installation
Field. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install tw-animate-css clsx tailwind-merge class-variance-authorityAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add avatarAnatomy
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.
Avatar Group
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.
Props
Loading types…