Avatar

Identifies a person or group. 32px image or initials; broken images fall back automatically.

Preview

RVNO+3

In action

Desk

On the desk

Initials on paper. No photograph required.

RVNR

When to use

Use it for

A person or organisation next to their name, or a row of collaborators.
initials as the fallback while the image loads or fails.

Not for

Logos and product images; use AspectRatio.
Decorative circles without a subject.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Avatar, AvatarRow } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/avatar.

2. Vendor the source

npx @noorddev/vlak-cli add avatar

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/avatar.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Avatar, AvatarRow } from "@noorddev/vlak-react";

<Avatar src="/renn.jpg" name="Renn" initials="RV" size="lg" />
<AvatarRow>
  <Avatar name="Renn" initials="RV" />
  <Avatar name="Noord" initials="NO" />
  <Avatar initials="+3" alt="" />
</AvatarRow>

Props

Avatar

Prop	Type	Default	Description
`src`	`string`
`alt`	`string`		Image text. Defaults to `name`, then `initials`; pass "" for a decorative avatar.
`name`	`string`		Who this is. Names the image, and the initials when there is no image.
`initials`	`string`		Shown when there is no image, or when it fails to load.
`size`	`"sm" \| "md" \| "lg"`	`"md"`

Also accepts HTMLAttributes<HTMLSpanElement>.

AvatarRow

Overlapping row with paper seams.

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

The image alt defaults to name, then initials; pass alt="" for a decorative avatar.
Initials with a name render role="img" with aria-label; without a name they are plain text.
A broken image falls back to the initials.

Markup

<div class="rs-avatar-row"><span class="rs-avatar">RV</span><span class="rs-avatar">NO</span><span class="rs-avatar">+3</span></div>

Classes

.rs-avatar.rs-avatar-sm.rs-avatar-lg.rs-avatar-row.rs-avatar-image.rs-avatar-in-row