@radix-ui/react-avatar

Basic Avatar

This code demonstrates how to create a basic avatar with an image and a fallback initial using @radix-ui/react-avatar.

```jsx
import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';

function BasicAvatar() {
  return (
    <Avatar>
      <AvatarImage src="https://example.com/user.jpg" alt="User" />
      <AvatarFallback>U</AvatarFallback>
    </Avatar>
  );
}
```

Custom Size Avatar

This code shows how to create an avatar with a custom size by applying a custom CSS class.

```jsx
import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';
import './styles.css'; // Assume this file contains the custom size styles

function CustomSizeAvatar() {
  return (
    <Avatar className="custom-avatar-size">
      <AvatarImage src="https://example.com/user.jpg" alt="User" />
      <AvatarFallback>U</AvatarFallback>
    </Avatar>
  );
}
```

Avatar with Fallback Image

This code demonstrates how to use a fallback image when the main avatar image fails to load.

```jsx
import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';

function AvatarWithFallbackImage() {
  return (
    <Avatar>
      <AvatarImage src="https://example.com/nonexistent.jpg" alt="User" />
      <AvatarFallback>
        <img src="https://example.com/fallback.jpg" alt="Fallback" />
      </AvatarFallback>
    </Avatar>
  );
}
```