Avatar
Identity at a glance, with initials that survive a missing image.
Live — this one is real
A small team, clearly named.
Usage
import { Avatar } from "mizu-ui";
export function Example() {
return (
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
<Avatar name="Mizu Workshop" />
<Avatar name="Aya Mori" size={60} />
<span className="mizu-field-hint">A small team, clearly named.</span>
</div>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect content/Media.tsx
Source is included in the npm package under src/content/Media.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | Accessible identity and fallback initials. |
| src / size | string / number | 44 | Optional image and diameter in pixels. |
Accessibility
One named image; redundant initials are hidden. Failed images fall back to initials.
Motion
Static identity.