Gengar UI

Avatar

A pixel-perfect retro avatar component with 8-bit style fallback.

PX8BRTA

Installation

npm install @radix-ui/react-avatar

Usage

import { VT323 } from 'next/font/google'
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

const pixelFont = VT323({ 
  weight: '400',
  subsets: ['latin'],
})

export function AvatarDemo() {
  return (
    <div className="flex items-center gap-4">
      {/* Pixel Art Avatar */}
      <Avatar>
        <AvatarImage 
          src="https://api.dicebear.com/7.x/pixel-art/svg?seed=custom" 
          className="[image-rendering:pixelated]"
        />
        <AvatarFallback className={`${pixelFont.className} text-xs`}>
          PX
        </AvatarFallback>
      </Avatar>

      {/* Letter Avatar */}
      <Avatar>
        <AvatarFallback className={`${pixelFont.className} text-4xl`}>
          A
        </AvatarFallback>
      </Avatar>
    </div>
  )
}
AlertBadge