Avatars

The Avatar component is a versatile and reusable React component designed to display user profile images with ease. Utilizing TypeScript for type safety and TailwindCSS for styling.

A size to fit every use case

AB

JD

Each Avatar component has an intials text fallback in the event you don't have a profile image for an individual.

/** @type {import('@tailwindlabs/lorem').ipsum} */
import React from 'react';
import Avatar from '@/components/Avatar';
import avatarImage from '@/images/avatar-1.jpg';

const AvatarsLayout = () => {
  return (
    <div className="flex items-center gap-6">
      <Avatar initials="AB" size="small" className="" />
      <Avatar initials="JD" size="medium" className="" />
      <Avatar src={avatarImage} alt="User Avatar" size="large" />
      <Avatar src={avatarImage} alt="User Avatar" size="xl" className="" />
      <Avatar src={avatarImage} alt="User Avatar" size="2xl" className="" />
      <Avatar src={avatarImage} alt="User Avatar" size="3xl" className="" />
    </div>
  );
};

export default AvatarsLayout;