Component

Avatar

User identity chips with fallback initials.

Preview

JD

Examples

Default

JD

Sizes

JD
MC
AB

Fallback

MC
AI Prompt

Ready to copy and paste into any AI model.

prompt.txt
Build a shadcn/ui **Avatar** component for the **Clinic Admin** design system.

**Brand tokens:** Primary #70C4CA (teal), secondary #F3F4F6, destructive #F7A9AA, border #C4D0DB, radius 10px (default). Font: Nunito Sans for body, Nunito for headings.

**Design preview:** Replicate exactly the UI shown in the Clinic Admin docs preview for this component (same labels, structure, variants, and layout).

Return a React component with TypeScript. Use shadcn/ui **Avatar** as base, cn() + Tailwind CSS. Support variants and sizes shown in the preview.
Copy once, paste anywhere, keep consistent output.