Docs
Avatar

Avatar

An image element with a fallback for representing the user.

DocsAPI ReferenceSource
CN

Installation

Install the following dependencies:

npm install @radix-ui/react-avatar

Copy and paste the following code into your project.

'use client';
 
import * as AvatarPrimitive from '@radix-ui/react-avatar';
import clsx from 'clsx';
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
import styles from './styles.module.scss';
 
const Avatar = forwardRef<
    ElementRef<typeof AvatarPrimitive.Root>,
    ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
    <AvatarPrimitive.Root ref={ref} className={clsx(styles.avatar, className)} {...props} />
));
Avatar.displayName = AvatarPrimitive.Root.displayName;
 
const AvatarImage = forwardRef<
    ElementRef<typeof AvatarPrimitive.Image>,
    ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
    <AvatarPrimitive.Image ref={ref} className={clsx(styles.avatar__image, className)} {...props} />
));
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
const AvatarFallback = forwardRef<
    ElementRef<typeof AvatarPrimitive.Fallback>,
    ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
    <AvatarPrimitive.Fallback ref={ref} className={clsx(styles.avatar__fallback, className)} {...props} />
));
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
export { Avatar, AvatarFallback, AvatarImage };

Update the import paths to match your project setup.

Usage

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
<Avatar>
    <AvatarImage src='https://github.com/shadcn.png' />
    <AvatarFallback>CN</AvatarFallback>
</Avatar>