Name : Avatar
Description : An image element with a fallback for representing the user.

---

### import

```
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
```

---

### use

```avatar.mdx
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
```

---

### examples

```avatar-demo.tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export default function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  )
}
```
