Add Avatar component with size and shape variants

[jalexw]

Summary

This PR introduces a new Avatar component to the UI library with support for multiple sizes, shapes, and an AvatarGroup component for displaying multiple avatars together.

Key Changes

• Avatar Component: New flexible avatar component built on Radix UI's Avatar primitive with:

  • 5 size variants (xs, sm, default, lg, xl)
  • 2 shape variants (circle, square)
  • Support for image display with fallback content

• Sub-components:

  • AvatarImage: Displays the avatar image with proper aspect ratio and object-fit
  • AvatarFallback: Shows initials or placeholder when image is unavailable or fails to load
  • AvatarGroup: Displays multiple avatars in an overlapping layout with optional max limit and overflow counter

• Storybook Stories: Comprehensive documentation with 8 stories covering:

  • Basic usage with image and fallback
  • All size and shape variants
  • Broken image handling
  • Custom styled fallbacks
  • Avatar groups with and without max limits

• Package Updates: Added @radix-ui/react-avatar dependency and bumped version to 0.14.10

Implementation Details

• Uses CVA (class-variance-authority) for variant management
• Fully typed with TypeScript interfaces extending Radix UI primitives
• Exported from main UI index for easy access
• AvatarGroup supports dynamic overflow handling with configurable max display count
• Proper styling with Tailwind CSS for responsive and accessible layouts

https://claude.ai/code/session_0189xGgF6W1PsfLiqeM6dU4a

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ui	Ready	Preview, Comment	Apr 9, 2026 10:36pm