Avatar

A customizable avatar component with support for images, initials, and status indicators.

John Doe

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Avatar Code

Copy Avatar Code

Avatar Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The child components to render inside the avatar container, such as AvatarImage or AvatarTooltip.
className	string	No	undefined	Additional class names for custom styling of the avatar container.

AvatarImage Props

Name	Type	Required	Default	Description
size	number	Yes	undefined	The size of the avatar image in pixels.
src	string	No	undefined	The source URL of the avatar image.
fallback	string	No	undefined	Fallback text or initials to display when the image is not available.
className	string	No	undefined	Additional class names for custom styling of the avatar image.

AvatarTooltip Props

Name	Type	Required	Default	Description
text	string	Yes	undefined	The text to display inside the tooltip.
position	"top" \| "bottom" \| "left" \| "right"	No	"bottom"	The position of the tooltip relative to the avatar.
className	string	No	undefined	Additional class names for custom styling of the tooltip.