Avatar

Ready

User image with fallback.

Requires radix-ui

Installation

$ npx @oratiq-js/ui add avatar

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

import

import { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants } from "@/components/ui/avatar";

JRJRJRJRJRJR

The fallback renders while the image loads, and stays if it fails.

JRCB

Stacks with a negative logical margin, so it leans the correct way under RTL.

AvatarImage requires alt text naming the person, not 'avatar' or 'profile picture'.
Initials fallbacks are decorative when the name appears next to them — pass an empty alt in that case.
The overflow count is real text, so it is announced rather than being a purely visual '+8'.