Docs
Avatar

Avatar

An image element with a fallback for representing the user.

This component uses Radix UI
MT
import { Avatar, AvatarFallback, AvatarImage } from 'ui'
 
export function AvatarDemo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/mildtomato.png" alt="@mildtomato" />
      <AvatarFallback>MT</AvatarFallback>
    </Avatar>
  )
}

Installation

npx shadcn-ui@latest add avatar

Usage

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
<Avatar>
  <AvatarImage src="https://github.com/mildtomato.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
PreviousAspect Ratio
NextBadge