Things

The Avatar component displays a user's profile image with an automatic fallback when the image fails to load or is not provided. It supports multiple sizes and can display custom fallback content. Built from scratch using React and native HTML img elements. No UI library dependencies.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/avatar.json

Usage

tsx

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

<Avatar src="/user.jpg" alt="User" />
<Avatar src="/user.jpg" alt="User" size="lg" />
<Avatar fallback="JD" size="sm" />

Examples