Avatar

Popular

User avatar with image fallback and status indicator.

displayuserimage

Import

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

Basic Usage

Avatar Preview

Code

tsx

<Avatar
  src="/avatars/user.jpg"
  alt="User Name"
  name="John Doe"
/>

Sizes

Available in multiple sizes

1<div className="flex items-center gap-2">
2  <Avatar size="xs" name="JD" />
3  <Avatar size="sm" name="JD" />
4  <Avatar size="md" name="JD" />
5  <Avatar size="lg" name="JD" />
6  <Avatar size="xl" name="JD" />
7</div>

With Status

Show online/offline status

1<div className="flex gap-4">
2  <Avatar name="Online" status="online" />
3  <Avatar name="Away" status="away" />
4  <Avatar name="Busy" status="busy" />
5  <Avatar name="Offline" status="offline" />
6</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring