Thumbnail
A small rounded, cover-fit record image — 32px in a list row, 48px in a card — with a fallback for records that have none.
- Status
- Since
0.23.10- Accessibility pattern
- alt text, or decorative beside its name
Last updated
Install
Add Thumbnail from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.
pnpm dlx shadcn@latest add @vegastack/thumbnailUsage
import { Thumbnail } from "@/components/ui/thumbnail";
<Thumbnail src={family.imageUrl} alt="" fallback={<BrandMark />} size="sm" />;Thumbnail shows a record's image, cropped to cover a rounded square. A record with no image —
or one whose image fails to load — shows fallback: pass the app's brand mark so an empty record
still looks like it belongs. DataList's thumbnail column and MediaCard render it for you.
Examples
Sizes
sm is 32px, for a list row; default is 48px, for a card.
Fallback
With no fallback, a record with no image (or a broken one) shows an image icon on the muted
surface.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
alt* | string | — | The image's text alternative. Pass "" when the name sits right next to it (a list row, a
card title), so the image is decorative. |
fallback | React.ReactNode | <ImageIcon /> | What shows when there is no image, or it fails to load — the app's brand mark, an icon. |
size | "default" | "sm" | "default" | sm is 32px (a list row), default is 48px (a card). |
src | string | — | The image URL. Empty, missing or failing to load shows fallback instead. |
Data attributes and CSS variables on Thumbnail
| Attribute | Values |
|---|---|
data-fallback | "" |
data-size | mirrors a prop or state value |
data-slot | "thumbnail" | "thumbnail-fallback" |
Accessibility
- Pass
alt=""when the record's name sits right beside the image — a list row, a card title — so it is not read twice. Give it real alt text when it stands alone. - The fallback takes the same name: with an
alt, it is animgnamed by it; withalt=""it is hidden from assistive technology.
| Contract | States tested |
|---|---|
| Behaviour | image, fallback, error |
| Accessibility | labeled, browser-accessibility-test |
| Visual | default, hover |
Do / Don't
Do
Pass the app's brand mark as the fallback, so a record without an image still reads as one of yours.
Don't
Use Thumbnail for a person — that is Avatar, with initials as its fallback.