# Thumbnail

Source: https://payloadcms.com/docs/ui-components/thumbnail

The `Thumbnail` component previews an image URL and falls back to a file graphic when no valid image is available.

## Import

```tsx
import { Thumbnail } from '@payloadcms/ui'
```

## File fallback

**Implementation**

```tsx
<Thumbnail size="medium" />
```

**Styling**

Style the Thumbnail frame and inherited fallback icon color when no image is available.

```css
.thumbnail {
  background: #f3f1ff;
  border: 1px solid #c8c0ff;
  border-radius: 10px;
  color: #6d5dfc;
}
```

- `background`: Fallback surface.
- `border`: Thumbnail outline.
- `color`: Inherited fallback icon color.

## Sizes

**Implementation**

```tsx
<Thumbnail size="small" />
<Thumbnail size="medium" />
<Thumbnail size="large" />
```

**Styling**

Override the size modifiers when a project’s media grid needs different Thumbnail dimensions.

```css
.thumbnail--size-small {
  width: 3rem;
  max-height: 3rem;
}

.thumbnail--size-medium {
  width: 5rem;
  max-height: 5rem;
}

.thumbnail--size-large {
  width: 8rem;
  max-height: 8rem;
}
```

- `max-height`: Maximum Thumbnail height.
- `width`: Thumbnail width.

Pass the document through `doc` when possible so the image receives its filename as alternative text.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop            | Type                                                   | Default    | Description                                  |
| --------------- | ------------------------------------------------------ | ---------- | -------------------------------------------- |
| `fileSrc`       | `string`                                               | —          | Image URL to preview.                        |
| `doc`           | `Record<string, unknown>`                              | —          | Supplies file metadata such as `filename`.   |
| `size`          | `'small' \| 'medium' \| 'large' \| 'expand' \| 'none'` | `'medium'` | Sets the thumbnail dimensions.               |
| `width`         | `number`                                               | —          | Sets the rendered image width.               |
| `height`        | `number`                                               | —          | Sets the rendered image height.              |
| `imageCacheTag` | `string`                                               | —          | Adds a cache-busting value to the image URL. |