ImageList
v1.0.6Updated 19 Oct 2026Uniform image grid with title / subtitle overlays and configurable aspect ratios. For photo galleries and product catalogues.
Preview
Live · 9 stories▸Why this is recommendedimage-listgallerygridaspect+3
ImageList in a gallery layout — photo.
- ✓Photo galleries
- ✓Product catalogues
- ✓Wallpaper / asset pickers
- Uniform aspect ratio (square / 4:3 / 16:9 / portrait)
- Title + subtitle overlay
- Responsive column count
- Hover affordance
- Pass-through props (data-* and the rest) land on the root of EVERY branch — populated grid, loading skeleton grid and empty — so an id an e2e or audit tool reads never disappears while the component is busy or has nothing to show. They are spread first, so they cannot overwrite the wiring the component sets itself (data-slot, the state roles, className, style, ref)
- ✕Mixed-height items (use Masonry)
- ✕List rows with text (use List)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
itemsImage items
yescolumnsColumn count
—aspectAspect ratio
—...propsEvery remaining standard attribute (data-* hooks, id, style, title, aria-*, ref, handlers) is spread onto the root of whichever branch renders — the grid ul, the loading grid, or the empty wrapper div. The spread goes FIRST, so data-slot, the loading status role and the merged className can never be clobbered. The caller ref receives the branch root in every state (fb_5c6ffd6a)
—