A flexible avatar component with support for images, fallback content, and multiple styling options

Basic Usage

Different Sizes

Different Shapes

Fallback Content

• Base styling with Tailwind:
  Core Structure

  .avatar {
    @apply flex items-center justify-center overflow-hidden border-2 border-black;
  }
  
  .avatar img {
    @apply w-full h-full object-cover;
  }
  

• Size classes:
  Size Classes

  .small { @apply w-8 h-8; }
  .medium { @apply w-12 h-12; }
  .large { @apply w-16 h-16; }
  .xlarge { @apply w-24 h-24; }
  

• Shape classes:
  Shape Classes

  .circular { @apply rounded-full; }
  .rounded { @apply rounded-lg; }
  .square { @apply rounded-none; }