Hero Components

The TypeScript UI Hero Components are a collection of highly customizable and reusable React hero components for your web applications.

Everyone loves a hero

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;