"use client"; import { type ComponentPropsWithoutRef, type ComponentRef, forwardRef, } from "react"; import * as AvatarPrimitive from "@radix-ui/react-avatar"; import { cn } from "@/utils/cn"; import { cva, type VariantProps } from "class-variance-authority"; const avatarVariants = cva( "relative flex shrink-0 overflow-hidden rounded-full", { variants: { size: { sm: "h-8 w-8", md: "h-10 w-10", lg: "h-14 w-14", xl: "h-20 w-20", }, }, defaultVariants: { size: "md" }, } ); export interface AvatarProps extends ComponentPropsWithoutRef, VariantProps {} const Avatar = forwardRef< ComponentRef, AvatarProps >(({ className, size, ...props }, ref) => ( )); Avatar.displayName = AvatarPrimitive.Root.displayName; const AvatarImage = forwardRef< ComponentRef, ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); AvatarImage.displayName = AvatarPrimitive.Image.displayName; const AvatarFallback = forwardRef< ComponentRef, ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; export { Avatar, AvatarImage, AvatarFallback, avatarVariants };

Avatar

Anatomy

Installation

Ensure Earthling UI is installed

Import the component from earthling-ui

The component is ready to use