Packaged Minecraft player faces with accessible image semantics.
Preview
Example source could not be loaded: avatar-example. Reload this page to retry.Usage
Use AvatarImage skin="wide/steve" or another exported packaged skin name to render the original face and optional hat layer. Supply alt for the player name. The example needs no external image service.
Composition
Avatar supports size sm/default/lg, corresponding to logical 12/16/20 pixels; other sizes throw. Image has hat=true and upsideDown=false defaults. AvatarGroup can set scale explicitly; otherwise it uses the first explicit child scale, then 2. GroupCount labels additional members.
Interaction and limits
Arbitrary src values use an ordinary image and are subject to network availability and image delivery permissions. Empty fallback renders Steve; scalar fallback paints a Label. Grouping, badges and custom rich fallback are web compositions rather than native player-list layouts.
See the upstream API for the underlying part and event contracts.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
import * as React from "react";
import { Label } from "./label";
import type { MinecraftAvatarSkin } from "./minecraft-avatar-assets";
import { minecraftAvatarSkins } from "./minecraft-avatar-assets";
import { paintMinecraftAvatar } from "./minecraft-avatar-paint";
import type { MinecraftProps } from "./minecraft-render";
import {
isMinecraftTextContent,Interactive playground
Username lookup requires an internet connection. Profiles may be cached.
TEAM PROFILES6 people in this workspace