Docs

Avatar

A photo, or an initials/icon fallback on a colored chip.

Colors (initials fallback)

PRSEACNEINSUWAERBRSIBR

Sizes

XSSMMDLGXL

Real use · team roster with presence

Ada LovelaceGHATKJ
Overlapping group —Ada LovelaceGHAT+3

Using Avatar

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Avatar — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class avatar, with 18 modifiers:

  • .avatar
  • .avatar-accent
  • .avatar-error
  • .avatar-group
  • .avatar-info
  • .avatar-lg
  • .avatar-md
  • .avatar-neutral
  • .avatar-offline
  • .avatar-online
  • .avatar-primary
  • .avatar-ring
  • .avatar-rounded
  • .avatar-secondary
  • .avatar-sm
  • .avatar-success
  • .avatar-warning
  • .avatar-xl
  • .avatar-xs

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react
import { Avatar } from "@wizeworks/silicaui-react";

Props

PropTypeRequiredDescription
colorAvatarColornoFallback-chip + ring color; maps to avatar-<color>.
sizeAvatarSizenoDefault md.
shapeAvatarShapenocircle (default) or a rounded square.
ringbooleannoDraw an accent ring with a base-100 gap.
statusAvatarStatusnoPresence dot in the corner.
srcstringnoPhoto URL. If it fails to load, the fallback children show instead.
altstringnoAccessible label for the photo / the initials fallback.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source
import { Avatar, AvatarGroup } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";
import { COLORS, SIZES } from "../lib/data";

// A stand-in "photo" (data URI, always loads offline): a head-and-shoulders
// silhouette on a gradient, so the image path — object-fit cover + rounding —
// is demonstrated without a network request.
const PHOTO = `data:image/svg+xml,${encodeURIComponent(
    `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>` +
        `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +
        `<stop offset='0' stop-color='#6366f1'/><stop offset='1' stop-color='#ec4899'/>` +
        `</linearGradient></defs>` +
        `<rect width='100' height='100' fill='url(#g)'/>` +
        `<circle cx='50' cy='40' r='18' fill='rgba(255,255,255,.92)'/>` +
        `<rect x='22' y='62' width='56' height='38' rx='19' fill='rgba(255,255,255,.92)'/>` +
        `</svg>`,
)}`;

export function AvatarDemo() {
    return (
        <>
            <Section title="Colors (initials fallback)">
                <Row>
                    {COLORS.map((color) => (
                        <Avatar key={color} color={color} alt={color}>
                            {color.slice(0, 2).toUpperCase()}
                        </Avatar>
                    ))}
                </Row>
            </Section>

            <Section title="Sizes">
                <Row>
                    {SIZES.map((size) => (
                        <Avatar key={size} color="primary" size={size} alt={size}>
                            {size.toUpperCase()}
                        </Avatar>
                    ))}
                </Row>
            </Section>

            <Section title="Real use · team roster with presence">
                <Row>
                    <Avatar src={PHOTO} alt="Ada Lovelace" ring status="online" />
                    <Avatar color="secondary" alt="Grace Hopper" ring status="online">
                        GH
                    </Avatar>
                    <Avatar color="neutral" alt="Alan Turing" status="offline">
                        AT
                    </Avatar>
                    <Avatar shape="rounded" color="brand" alt="Katherine Johnson">
                        KJ
                    </Avatar>
                </Row>
                <Row>
                    <span className="text-xs opacity-60">Overlapping group —</span>
                    <AvatarGroup>
                        <Avatar src={PHOTO} alt="Ada Lovelace" />
                        <Avatar color="secondary" alt="Grace Hopper">
                            GH
                        </Avatar>
                        <Avatar color="accent" alt="Alan Turing">
                            AT
                        </Avatar>
                        <Avatar color="neutral" alt="+3 more">
                            +3
                        </Avatar>
                    </AvatarGroup>
                </Row>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Avatar — a single .avatar div whose inner <img> rounds via inherited radius. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors
import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Avatar", "avatar", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "avatar avatar-primary" rather than passing a colour as a prop.

Takes children
no
Hydrated by
nothing — this one is static markup

The full API for Avatar, on every path, is available through the Silica MCP server.