Components

Avatar

A round picture, or the name's initial on the glowing accent. With an in-browser crop for uploads.

Priya

Import

import { Avatar } from '@rinzai/zen';

Examples

Upload

cropImageToSquare centres, crops and shrinks a chosen image in the browser to a small data URL.

API reference

<Avatar>

Round profile picture; without an image, the name's initial on the glowing accent. Decorative (hidden from screen readers) unless you give it `alt`.

PropTypeDefault
nameRequired

Name or email, for the initial.

string—
alt

Accessible name; leave out when the name is shown next to the avatar.

string—
className

Size and more, e.g. "size-12 text-lg" (default size-9).

string—
src

Image URL (or data URL); without it, the initial is shown.

string | null—