Display
Image list
The choice between the two layouts is the whole design decision. A grid crops every tile to one ratio, which is right when the set is being compared and wrong when the images are the content; masonry keeps each image's own proportions, which is the opposite trade. Tiles fade in as they decode rather than on mount, so a slow image arrives gracefully instead of snapping in after its neighbours have settled, and captions stay out of the way until hover.
npx shadcn@latest add @minflow/image-listWhere to use it
- Galleries, moodboards, asset pickers, and media libraries.
- Masonry when the images vary in shape and cropping would lose the subject.
- Not for a set of two or three - at that size a grid is just three images with extra rules.
Variations
Uniform grid
Comparable items - avatars, thumbnails, product shots. One ratio makes the set scannable and the differences between tiles legible.
Arc
Rise
Fold
Orbit
Grid
Wave
Masonry
Photography and artwork, where cropping to a square would throw away the composition.
- Arc
- Rise
- Fold
- Orbit
- Grid
- Wave