Components

Avatar

An image element with a fallback for when the image fails to load.

example.tsx

Import

tsx

import { AppAvatar, AppAvatarImage, AppAvatarFallback } from "@/components/primitives/AppAvatar"

Examples

Fallback

When the image fails to load, AppAvatarFallback renders initials instead.

example.tsx

Sizes

Control size via className on AppAvatar.

example.tsx

CNCNCNCNCN

Group

Stack avatars using negative margin and a ring border to show a group of users.

example.tsx

CNJDABKL

With status

Wrap in a relative container and add an absolutely positioned dot.

example.tsx

With text

Pair an avatar with a name and email for user identification rows.

example.tsx

shadcn

m@example.com

API Reference

AppAvatar

Prop	Type	Default	Description
className	string	—	Use to control size (h-* w-*) and other overrides. Merged via cn().

AppAvatarImage

Prop	Type	Default	Description
src	string	—	The URL of the image to display.
alt	string	—	Alternative text for the image.

AppAvatarFallback

Renders when the image is missing or fails to load. Place initials or an icon inside. Accepts all <span> attributes including className.

Source

src/components/primitives/AppAvatar.tsx

"use client"

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

function AppAvatar(props: React.ComponentProps<typeof Avatar>) {
  return <Avatar {...props} />
}

function AppAvatarImage(props: React.ComponentProps<typeof AvatarImage>) {
  return <AvatarImage {...props} />
}

function AppAvatarFallback(props: React.ComponentProps<typeof AvatarFallback>) {
  return <AvatarFallback {...props} />
}

export { AppAvatar, AppAvatarImage, AppAvatarFallback }