Skip to main content

    Components

    Qwik M3 Avatar

    This component implements both Qwik-Ui and Flowbite avatars with proper accessibility support. Avatars can be used to represent users with images, initials, or fallback icons.

    Prop Controls

    Qwik-UI Avatars

    Basic Avatars

    User avatar
    JD
    User avatar
    AB
    User avatar
    MK

    Sizes

    Small avatar
    SM
    Medium avatar
    MD
    Large avatar
    LG

    With Status

    User avatar
    ON
    User avatar
    OF
    User avatar
    AW

    Flowbite Avatars

    Basic Avatars

    User avatar
    JD
    Empty Avatar

    Colors & Sizes

    Purple bordered avatar
    Success bordered avatar
    Info bordered avatar

    Status Indicators

    Online user
    Away user
    Busy user
    Offline user

    Stacked Avatars

    Stacked avatar 1
    Stacked avatar 2
    Stacked avatar 3
    +5
    
// Qwik-UI Avatar
<Avatar.Root>
  <Avatar.Image
    src="/path/to/avatar.jpg"
    alt="User avatar"
  />
  <Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>

// Flowbite Avatar
<AvatarFB
  img="path/to/avatar.jpg"
  alt="User avatar"
  size="md"
  status="online"
  statusPosition="bottom-right"
  rounded
/>