Avatar

An image element with a fallback for representing the user.

Preview

CN

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/avatar.json

Usage

tsx
10 lines
1
2
3
4
5
6
7
8
9
10
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export default function MyComponent() {
  return (
    <Avatar>
      <AvatarImage src="https://example.com/avatar.png" />
      <AvatarFallback>AB</AvatarFallback>
    </Avatar>
  )
}

Examples

Sizes

SMMDLGXL

Fallback

JDABMKTS

Avatar Stack

CNABMK+5

With Name

CN

shadcn

@shadcn

Props

PropTypeDescription
AvatardivThe root container
AvatarImageimgThe image element
AvatarFallbackdivFallback when image fails to load