A versatile Avatar component that displays an image or initials based on the provided name. It supports customization through additional styles and can indicate a disabled state.

PreviewCode

With Image

Fallback / Without Image

PP

Technologies Used

TailwindCSS

Tailwind Merge

Props

Name	Type	Default	Description
src	string | StaticImageData	-	The source of the avatar image.
alt	string	"avatar"	The alt text for the image.
className	string	-	Additional CSS classes for custom styling.
name	string	-	The name from which to generate initials if no image is provided.
isDisabled	boolean	false	Determines if the avatar is in a disabled state.

An extension of the Avatar component that adds an optional icon overlay. It retains all features of the Avatar while allowing an icon to be displayed in the corner.

PreviewCode

Technologies Used

TailwindCSS

Tailwind Merge

Props

Name	Type	Default	Description
src	string | StaticImageData	-	The source of the avatar image.
alt	string	"avatar"	The alt text for the image.
className	string	-	Additional CSS classes for custom styling.
name	string	-	The name from which to generate initials if no image is provided.
isDisabled	boolean	false	Determines if the avatar is in a disabled state.
icon	JSX.Element	-	An optional icon to display in the corner of the avatar.

A component that displays a stack of Avatar components, with optional extension for additional avatars. The Avatar component is used internally to render individual avatars.

PreviewCode

With Extension

+2

Without Extension

Technologies Used

TailwindCSS

Tailwind Merge

Avatar Props

Name	Type	Default	Description
src	string | StaticImageData	-	The source of the avatar image.
alt	string	"avatar"	The alt text for the image.
className	string	-	Additional CSS classes for custom styling.
name	string	-	The name from which to generate initials if no image is provided.
isDisabled	boolean	false	Determines if the avatar is in a disabled state.

AvatarStack Props

Name	Type	Default	Description
avatars	AvatarProps[]	-	Array of AvatarProps objects to display in the stack.
limit	number	5	Maximum number of avatars to display before showing an extension.
withExtension	boolean	-	Determines whether to show an extension avatar indicating additional items.