Image Cell

Custom

Square image thumbnail inside a table cell. Hover reveals a larger preview via HoverCard. Works with any image URL — avatars, logos, attachments, product photos.

@/components/ui/image-cell

In context — hover any photo

Photo	Name	Role
	Dragana V.	Design Lead
	Marko K.	Support Agent
	Jovana B.	QA Engineer
	Stefan V.	Account Mgr

Thumbnail sizes — size prop

size	Preview	Usage
24px		Compact rows, dense tables
32px		Standard table cell — default
40px		Medium density, wider rows
48px		Spacious layout, card grids

Preview sizes — previewSize prop

64px

96px — default

200px

240px

Hover each thumbnail to see the preview at that size.

Props

Prop	Type	Description
src	string	Image URL — any format, any host. Use a CDN, storage bucket, or data URI.
alt	string	Alt text for accessibility and screen readers
size	number	Thumbnail size in px. Default: 32
previewSize	number	Hover preview size in px. Default: 96
className	string	Extra classes applied to the trigger button

The fallback icon shows automatically when the image fails to load — no extra error handling needed.

On this page