Skip to content
Pinky UI

Choosing a gallery

Five ways to arrange a collection. Picking the right one matters more than tuning the one you picked.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Overview
Focused item

Choosing a gallery · selection stays explicit

Five ways to arrange a collection. Picking the right one matters more than tuning the one you picked.

Decision order

  1. Volume and mixed heightsMasonry Gallery
  2. Expressive, personal, editorialPolaroid Wall
  3. A small set that should unpack from one placeStack to Grid
  4. A hand of a few optionsCard Fan
  5. One at a time, reviewed and dismissedDraggable Card Stack

In one line each

  • Masonry Gallery — content density and mixed ratios. No motion of its own, which is what makes it safe at a hundred items.
  • Polaroid Wall — expressive, editorial presentation. Six to twenty-four photos that should feel pinned rather than placed.
  • Stack to Grid — reveals that a small collection has more inside it.
  • Card Fan — a few options presented as a hand; overlap is the point.
  • Draggable Card Stack — sequential review, where dismissal is the action.

The question that settles most cases

*Is the arrangement carrying meaning, or is it carrying volume?*

Meaning — a curated set, a story, a personality — justifies an expressive layout. Volume does not: at scale, arrangement should get out of the way and let the content be the interest.

Common mistakes

  • Reaching for Polaroid Wall on a product grid. Rotation destroys the comparability that a product grid exists for.
  • Using Card Fan for content people need to read. Overlap hides text.
  • Putting a heavy card component inside a large gallery. See image-heavy-performance.

Source: packages/skills/patterns/gallery-selection.md