# Avatar Thumbnail
URL: /docs/web/components/avatar-thumbnail

Avatar Thumbnail component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import { AvatarThumbnail } from '@docyrus/ui/components/avatar-thumbnail';
import { Input } from '@docyrus/ui/primitives/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { cn } from '@docyrus/ui/primitives/lib/utils';

type Shape = 'rounded' | 'circle' | 'square';

const PRESET_ICONS = [
  { value: 'fal star', label: 'Star' },
  { value: 'fal user', label: 'User' },
  { value: 'fal heart', label: 'Heart' },
  { value: 'fal building', label: 'Building' },
  { value: '🎉', label: 'Emoji: Party' },
  { value: '🚀', label: 'Emoji: Rocket' },
  { value: '', label: 'None (fallback)' }
];

const PRESET_COLORS = [
  { value: '#3b82f6', label: 'Blue' },
  { value: '#10b981', label: 'Green' },
  { value: '#f59e0b', label: 'Amber' },
  { value: '#ef4444', label: 'Red' },
  { value: '#6366f1', label: 'Indigo' },
  { value: '#ec4899', label: 'Pink' },
  { value: '', label: 'None' }
];

export function AvatarThumbnailDemo() {
  const [shape, setShape] = useState
                  
                    
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Size</span>
                
                  
                    
                    
                    
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Icon</span>
                
                  
                    ))}
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Color</span>
                <div className="flex items-center gap-2">
                  <input
                    type="color"
                    value={color || '#000000'}
                    onChange={e => setColor(e.target.value)}
                    className="h-8 w-8 cursor-pointer rounded border border-border" />
                  
                    
                      ))}
                    
                  
                </div>
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Image URL</span>
                <Input
                  value={imageUrl}
                  onChange={e => setImageUrl(e.target.value)}
                  placeholder="https://..."
                  className="h-8 w-48 text-xs" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="flex items-center justify-center py-6">
        
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-avatar-thumbnail
```

**Dependencies:**
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)

## Usage

```tsx
import {
  AvatarThumbnail
} from "@docyrus/ui/components/avatar-thumbnail";

```

## Shape

| Shape | Description |
|-------|-------------|
| `rounded` | Rounded — `rounded-md` |
| `circle` | Circle — `rounded-full` |
| `square` | Square — `rounded-none` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `shape` | `"rounded"` \| `"circle"` \| `"square"` | `"default"` |
| `ref` | `Ref<HTMLDivElement>` | — |
| `icon` | `string \| null` | — |
| `color` | `string \| null` | — |
| `image` | `{ signed_url?: string \| null; file_name?: string } \| null` | — |
| `className` | `string` | — |