Avatar
Portraits clipped inside a hand-drawn ring, with hatched initials when the image is missing.
Sizes
SDL
FallbackDrawn when no image loads
CHCHCH
Badge
ONOF
GroupHover to lift a face
CMAP
+3
Installation
Add Avatar with the shadcn CLI.
npx shadcn@latest add https://sketchcn.chuwii.com/r/avatar.json
Examples
Profile rows, stacked teams, and a wobblier hand.
Profile row
CH
Chuwiicreator of sketchcn
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";

export function ProfileRow() {
  return (
    <div className="flex items-center gap-3">
      <Avatar size="lg">
        <AvatarImage
          src="https://api.dicebear.com/9.x/notionists/svg?seed=Chuwii"
          alt="Chuwii"
        />
        <AvatarFallback>CH</AvatarFallback>
      </Avatar>
      <div className="flex flex-col">
        <span className="text-sm">Chuwii</span>
        <span className="text-muted-foreground text-xs">
          creator of sketchcn
        </span>
      </div>
    </div>
  );
}
Missing portrait
SK
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export function MissingPortrait() {
  return (
    <Avatar size="lg">
      <AvatarImage src="/nowhere.png" alt="Unknown teammate" />
      <AvatarFallback>SK</AvatarFallback>
    </Avatar>
  );
}
Team stack
MAP
+8
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar";

const MEMBERS = ["Mali", "Anan", "Pim"];

export function TeamStack() {
  return (
    <AvatarGroup>
      {MEMBERS.map((member) => (
        <Avatar key={member}>
          <AvatarImage
            src={`https://api.dicebear.com/9.x/notionists/svg?seed=${member}`}
            alt={member}
          />
          <AvatarFallback>{member.charAt(0)}</AvatarFallback>
        </Avatar>
      ))}
      <AvatarGroupCount>+8</AvatarGroupCount>
    </AvatarGroup>
  );
}
Wobblier hand
SK
import { Avatar, AvatarFallback } from "@/components/ui/avatar";

export function ScribbledFallback() {
  return (
    <Avatar size="lg" className="[--sketch-roughness:2]">
      <AvatarFallback className="[--sketch-bg-hachure-gap:3] [--sketch-bg-hachure-angle:45]">
        SK
      </AvatarFallback>
    </Avatar>
  );
}