{
  "name": "avatar",
  "title": "Avatar",
  "description": "A profile image whose fallback initials sit on the brand gradient · a lit placeholder, never a gray box.",
  "category": "data-display",
  "install": {
    "command": "npx shadcn@latest add @clow/avatar",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "size": {
      "type": "select",
      "options": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md"
    }
  },
  "agent": {
    "prompt": "Use Avatar for people and stations. Always pass fallback with 1-2 characters (a callsign or initials) so a failed image still renders lit; src/alt are optional. For crews, wrap Avatars in AvatarGroup · it overlaps them with a background ring; pass overflow={n} to append a '+n' counter.",
    "examples": [
      "<Avatar src=\"/crew/vex.png\" alt=\"Operator Vex\" fallback=\"VX\" />",
      "<Avatar size=\"lg\" fallback=\"KX\" />",
      "<AvatarGroup overflow={3}><Avatar fallback=\"VX\" /><Avatar fallback=\"KS\" /></AvatarGroup>"
    ]
  },
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/avatar",
    "markdown": "https://clow.cards/llms/avatar.md",
    "registryItem": "https://clow.cards/r/avatar.json"
  }
}
Draw

Playground

Examples

Props
