ComponentsCore

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

shape
Usage

Installation

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.

lib/utils.ts

Copy and paste the following code into your project.

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

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…

Edit on GitHub

Show More

Truncate long text with an animated Show More / Show Less toggle.

Command

Command offers an accessible interface to build keyboard-driven menus, search fields, and autocomplete inputs by combining input handling, navigation, and selection.