Updated: Masonry
By Steven Van ·
The rebuilt Masonry component adds drag to reorder, a lightbox and captions, and its columns now follow the container's width.
The React Bits Masonry component has been rebuilt. The updated version is described as a masonry gallery that springs into place, reflows as it resizes and opens images in a lightbox.
What the rebuild adds
- Springy reflow when the layout changes
- Tiles that appear as you scroll
- Hover effects: zoom, lift and tilt
- Captions
- A lightbox for opening images
- Drag to reorder
Layout changes
Columns now follow the container, and tiles keep each image's shape.
Installing
The component page offers a choice of JavaScript or TypeScript and plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/Masonry-TS-TW.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →