Avatar

An 8-bit style avatar component that displays user profile images with optional pixelation and fallback.

A pixelated 8-bit avatar component

Open in
8B
8B
8B

Installation

pnpm dlx shadcn@canary add https://8bitcn.com/r/8bit-avatar.json

Usage

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/8bit/avatar"
<Avatar>
  <AvatarImage src="https://8bitcn.com/images/pixelized-8bitcnorc.jpg" alt="@8bitcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Examples

Variants

<Avatar variant="pixel">
  <AvatarImage src="https://8bitcn.com/images/pixelized-8bitcnorc.jpg" alt="@8bitcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

<Avatar variant="default">
  <AvatarFallback>AB</AvatarFallback>
</Avatar>

Custom Sizes

<Avatar className="size-20">
  <AvatarImage src="https://8bitcn.com/images/pixelized-8bitcnorc.jpg" alt="@8bitcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

<Avatar className="size-6">
  <AvatarFallback>8B</AvatarFallback>
</Avatar>