Beta
Bento Gallery
Draggable bento grid of media that expands into a shared lightbox modal with a floating dock switcher.
Bento Gallery
Draggable bento grid of media that expands into a shared lightbox modal with a floating dock switcher.
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.
Install
Adds Bento Gallery and its dependencies to your project through the shadcn CLI.
$ npx shadcn@latest add https://www.ssicevs.com/r/bento-gallery.jsonProps · 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.