Avatar

Circular profile images built on Radix Avatar with an automatic initials fallback, plus overlapping AvatarGroup and count primitives.

avatarimageprofilefallbackradix

How do I install the Avatar component?

Run the command below in a project with the shadcn CLI. It copies the component source into your repo and installs its dependencies.

npx shadcn@latest add https://www.saasuji.com/r/avatar.json

Also available as a markdown reference for AI agents: /components/avatar.md

Card

A surface container with header, title, description, content, and footer sections for grouping related information.

Product Logo

A product logo image with automatic fallbacks: falls back to the site favicon when the logo fails, then to uppercase initials when no image loads.