Avatar

Avatars are used to represent a user, and the profile picture

default

import { Avatar } from "@/components/ui/Avatar";

export default function Page() {
  return (
    <div className="flex items-center gap-3.5">
      <Avatar src="/images/avatar-1.png" alt="avatar 1" />
      <Avatar src="/images/avatar-2.png" alt="avatar 2" rounded />
    </div>
  )
}

size

import { Avatar } from "@/components/ui/Avatar";

export default function Page() {
  return (
    <div className="flex items-center gap-3.5">
      <Avatar size="sm" src="/images/avatar-1.png" alt="avatar 1" />
      <Avatar size="md" src="/images/avatar-2.png" alt="avatar 2" />
      <Avatar size="lg" src="/images/avatar-3.png" alt="avatar 3" />
      <Avatar size="xl" src="/images/avatar-4.png" alt="avatar 4" />
    </div>
  )
}

bordered

import { Avatar } from "@/components/ui/Avatar";

export default function Page() {
  return (
    <div className="flex items-center gap-3.5">
      <Avatar bordered src="/images/avatar-1.png" alt="avatar 1" />
      <Avatar bordered src="/images/avatar-2.png" alt="avatar 2" />
      <Avatar bordered src="/images/avatar-3.png" alt="avatar 3" />
    </div>
  )
}

fallback

import { Avatar } from "@/components/ui/Avatar";
import { IconUserFilled } from '@tabler/icons-react';

export default function Page() {
  return (
    <div className="flex items-center gap-3.5">
    <Avatar alt="avatar 1" fallback="A" />
    <Avatar alt="avatar 2" fallback={<IconUserFilled size={20} />} />
    <Avatar alt="avatar 3" fallbackClassName="!bg-orange-400" fallback={<IconUserFilled size={20} />} />
  </div>
  )
}

avatar group

orientation='horizontal'

import { Avatar, AvatarGroup } from "@/components/ui/Avatar";

export default function Page() {
  return (
    <AvatarGroup orientation="horizontal">
      <Avatar bordered src="/images/avatar-1.png" alt="avatar 1" />
      <Avatar bordered src="/images/avatar-2.png" alt="avatar 2" />
      <Avatar bordered src="/images/avatar-3.png" alt="avatar 3" />
      <Avatar bordered src="/images/avatar-4.png" alt="avatar 4" />
      <Avatar bordered alt="more" fallback="+2" />
    </AvatarGroup>
  )
}

avatar group

orientation='vertical'

import { Avatar, AvatarGroup } from "@/components/ui/Avatar";

export default function Page() {
  return (
    <AvatarGroup orientation="vertical">
      <Avatar bordered src="/images/avatar-1.png" alt="avatar 1" />
      <Avatar bordered src="/images/avatar-2.png" alt="avatar 2" />
      <Avatar bordered src="/images/avatar-3.png" alt="avatar 3" />
      <Avatar bordered src="/images/avatar-4.png" alt="avatar 4" />
      <Avatar bordered alt="more" fallback="+2" />
    </AvatarGroup>
  )
}