Avatar

The Avatar component is an image element with a fallback text for representing the user.

Preview

Usage

import { Avatar } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <Avatar src='path/to/image.jpg' fallback='KG' />
  );
}

Props

Prop	Description	Required	Value
className	custom styles	optional	SCSS or Tailwind object
fallback	Fallback text when image is not available	optional	string
src	Image source URL	optional	string

Notes

• The Avatar component uses AvatarPrimitive.Root, AvatarPrimitive.Image, and AvatarPrimitive.Fallback from @radix-ui/react-avatar.

• Custom styles can be applied using the className prop.

• The src prop specifies the source URL for the avatar image.

• The fallback prop provides fallback content when the image is missing.

• For more details, refer to the Shadcn Avatar documentation.