Bento Gallery
A draggable bento grid gallery for product shots and dashboard screenshots that opens into a shared lightbox.
Bento Gallery
A draggable bento grid gallery for product shots and dashboard screenshots that opens into a shared lightbox.
Tiles are drag-to-reorder — easiest with a mouse on desktop.
When to use it
For mixed media where the items are genuinely different sizes and forcing them into equal cells would waste the layout. The drag and the shared lightbox suit portfolio and press pages where people browse rather than search.
Props · GalleryModal
| Prop | Type | Default |
|---|---|---|
| selectedItem | MediaItemType | · |
| isOpen | boolean | · |
| onClose | () => void; setSelectedItem: (item: MediaItemType | null) => void; mediaItems: MediaItemTy | · |
Generated from the component source. Run npm run props:extract after changing a signature.