UI / Components / foundations / Avatar

Avatar

Human face. Initials, emoji, or upload.

Profile avatar. Falls back through `imageUrl` → `emoji` → `initials` → blank circle. Sized in px, optionally with a status dot in the bottom-right.

$npx dock-ui add avatar

Usage

import { Avatar } from "@/components/ui/avatar";

<Avatar imageUrl="/me.jpg" initials="GK" size={32} status="online" />

Install

via CLI
$ npx dock-ui add avatar
Writes the file(s) directly to your components/ui/ folder. You own the code.
For agents
curl -L https://ui.trydock.ai/r/avatar.json
Returns a JSON manifest with file paths + contents. Agent-readable, LLM-fetchable.
← All components
Themes·Component kit · glossary
View on GitHub →