Getting Started
Foundations
Integrations
Components
Avatar
An image element with a fallback for representing a user. Supports multiple sizes and graceful loading states.
#Installation
npx @dinachi/cli@latest add avatar#Usage
tsx
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'#Examples
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'md' | The size of the avatar |
| src | string | — | The image source URL for the avatar |
| alt | string | — | Alternative text for the avatar image |
| fallback | React.ReactNode | — | Content to display when the image fails to load or is not provided |