React Image Gallery Components
ReactFrame has 37 React image gallery components (15 free), from classic grids with lightboxes to 3D cylinders, scroll-driven zoom galleries, bento layouts and hover-reveal portfolios. Each takes an array of your images and installs with the shadcn CLI.
How to choose
- Portfolios and case studies: gallery-reveal, project-index-list, expand-card-grid.
- Photo-heavy brands (restaurants, hotels, fashion): mood-gallery, cinematic-stacked-gallery, premium-bento-grid.
- A wow moment on a landing page: cylinder-gallery, cards-gallery-ring, bento-scroll-zoom-gallery.
- Simple and fast: motion-gallery-grid or gallery-lightbox.
All 37 components
- Image ShowcaseFree
- A product-style image viewer, a large main frame with prev/next arrows and an image counter, backed by a click-to-jump thumbnail strip and a reset-to-first button.
- npx shadcn@latest add https://reactframe.com/r/image-showcase.json
- Cylinder GalleryFree
- A 3D image gallery arranged around an auto-rotating cylinder, with configurable rows/columns, tilt angle, and rotation speed.
- npx shadcn@latest add https://reactframe.com/r/cylinder-gallery.json
- Gallery ExpandPremium
- A grayscale-to-color image gallery where hovering expands a card and its neighbors, with cursor-tracked 3D tilt and a click-to-open detail modal.
- Mood GalleryPremium
- A cinematic multi-column vertical marquee gallery with 4 moods, 11 3D perspective presets, film grain, chromatic aberration, and a click-to-open lightbox.
- Gallery FlowFree
- A gallery of scattered, gently drifting image cards with random rotation, cursor repel/attract mode, and a click-to-open lightbox.
- npx shadcn@latest add https://reactframe.com/r/gallery-flow.json
- Gallery CurvePremium
- A coverflow-style gallery arranged along a 3D curve, driven by wheel or drag, with line-indicator navigation and a keyboard-accessible lightbox.
- Photo AlbumFree
- A bound photo album with a linen cover that opens and pages that turn in 3D: drag or tap to turn, the page lifts when you near its edge, line indicators jump between spreads, and a captioned lightbox opens on any photo.
- npx shadcn@latest add https://reactframe.com/r/photo-album.json
- Masonry Photo GalleryFree
- A masonry photo gallery with category tabs under a sliding hairline, photos that glide to their new columns when filtered, hover focus that dims the rest, scroll-in reveals and a captioned keyboard lightbox.
- npx shadcn@latest add https://reactframe.com/r/masonry-photo-gallery.json
- Dome Photo SphereFree
- An immersive photo dome you look around from the inside: drag with inertia, an idle spin, tiles that brighten toward the centre of view, a ticking compass readout, and a lightbox that flies out of the tile you tap.
- npx shadcn@latest add https://reactframe.com/r/dome-photo-sphere.json
- Spiral GalleryFree
- Photo cards wound around an endless 3D helix that turns and climbs with the wheel, a drag or the arrow keys, with the far strand glowing faintly through, a big index and caption, and line indicators to jump anywhere.
- npx shadcn@latest add https://reactframe.com/r/spiral-gallery.json
- Floating Photo WallFree
- An endless wall of photos floating on three depth layers that slide at different speeds: drag with inertia, an idle drift, pointer parallax, a hovered card that lifts while the rest dim, and a captioned lightbox.
- npx shadcn@latest add https://reactframe.com/r/floating-photo-wall.json
- Poster TunnelFree
- An endless tunnel lined with posters you fly through: hairline frames rush past, the far end dissolves into fog, scroll or drag to speed up or reverse, hover to slow down, and line indicators fly you to any poster.
- npx shadcn@latest add https://reactframe.com/r/poster-tunnel.json
- 3D Product Spin ViewerFree
- A 360° product viewer driven by an image sequence: drag with inertia, an idle spin, a tick ruler that jumps to any angle, hotspots that fade in on the side they belong to, and pointer-follow zoom, with a hairline loading bar.
- npx shadcn@latest add https://reactframe.com/r/product-spin-viewer.json
- Gallery RevealPremium
- A theme-aware portfolio grid where hovering reveals the title, category, year and description through a circular clip-path opening from the cursor.
- YouTube GalleryPremium
- A YouTube-style video grid with hover-scale thumbnails, a pulsing play button, channel avatar and verified badge, and a click-to-open modal player.
- Skew Scroll GalleryPremium
- A 3-column masonry image gallery that skews in response to scroll velocity, the faster you scroll, the more it tilts, settling back with a spring.
- Dot Image SliderFree
- A before/after image reveal, a luminance-mapped halftone dot rendering on one side, the real photo on the other, dragged apart by a glowing lightsaber-style divider handle.
- npx shadcn@latest add https://reactframe.com/r/dot-image-slider.json
- Diamond Scroll GalleryPremium
- A rotated grid of diamond-cropped images that drift at different parallax speeds per column as you scroll, self-scrolling within its own container.
- Linen Drag ImagePremium
- An image sliced into a grid of tiles connected by cloth-like spring physics, drag to warp the fabric, release to let it settle, or click for a rippling flick.
- Expand Card GridFree
- A 2x2 grid of image cards that expand to fill the frame on click, revealing title/description/CTA, with keyboard arrow navigation between cards and swipe-to-close on touch.
- npx shadcn@latest add https://reactframe.com/r/expand-card-grid.json
- Story SliderPremium
- An Instagram Stories-style slider with 8 canvas-rendered cinematic transitions (fade, slide, wipe, zoom, iris, bars, morph, dissolve), per-slide progress bars, tap/swipe/keyboard navigation, and a thumbnail strip.
- Scroll Title GalleryPremium
- A self-scrolling, snap-scroll image gallery with a giant outlined title column that skews with scroll velocity and fills in on the active panel, plus Ken Burns zoom, a progress rail, and nav dots.
- Cards Gallery RingPremium
- A 3D ring of project cards you drag or scroll-wheel to rotate, with parallax tilt, hover-to-preview center panel, an optional custom cursor, and a light/dark theme toggle.
- Social Reels GridPremium
- A responsive grid of vertical reels-style video cards, hover or click to play, muted/looped inline with a play/pause and mute chip, creator username below, plus a paper/glass theme toggle.
- Product Grid SectionFree
- A responsive product/portfolio grid section, heading, per-card image with hover zoom and reveal overlay, category/price meta row, optional badge, and a centered CTA button below the grid.
- npx shadcn@latest add https://reactframe.com/r/product-grid-section.json
- Wave Gallery PagePremium
- A self-scrolling text/image list gallery, scrolling ripples a sinusoidal wave through each title row's spacing while its paired image or video crossfades in centered behind the list, with an optional counter overlay.
- Project Index ListPremium
- An editorial title/year project list over a shared floating background, hovering a row zoom-settles in that item's image with cursor parallax, while a directional color highlight sweeps in behind the exclusion-blended label.
- Scroll Swatch ShowcasePremium
- A self-scrolling, pinned swatch/color showcase, a headline and CTA sit above a horizontal filmstrip of slides with interleaved parallax and fading captions, plus clickable thumbnails and tag filters that smooth-scroll to match.
- Fullpage PhotosPremium
- A fullscreen photo gallery that advances one section at a time on wheel, arrow keys, or a double-tap, with a GSAP-choreographed directional slide and reveal between images.
- Premium Bento GridPremium
- A responsive bento-grid media gallery (2x2, 3x3, or custom asymmetric spans) with image/video slots, optional 3D cursor tilt, hover caption overlay, badges, glassmorphism, staggered entrance animations, and a click-to-open lightbox with keyboard nav.
- Motion Gallery GridFree
- A perfectly aligned image grid with a centered glassmorphism overlay card, heading, subtitle and CTA button, with a staggered blur/slide/fade/scale entrance triggered on scroll into view.
- npx shadcn@latest add https://reactframe.com/r/motion-gallery-grid.json
- Image Sidebar DockPremium
- A macOS-dock-style vertical nav, labels magnify and shift toward the cursor by proximity, each linked to a crossfading image panel with title, description and tag.
- Bento Scroll Zoom GalleryPremium
- A pinned bento-grid media gallery whose 8 image/video cells zoom out from a compact grid to a near-fullscreen mosaic as the user scrolls, with per-cell parallax, shimmer loading placeholders, and a stacked single-column layout on mobile.
- Cinematic Stacked GalleryFree
- A fullscreen hero gallery where inactive slides collapse into a stacked deck of thumbnails; clicking one crossfades it to full size with Ken Burns zoom, cursor parallax, and a title/description rail with CTA and prev/next controls.
- npx shadcn@latest add https://reactframe.com/r/cinematic-stacked-gallery.json
- Fullscreen Panel Reveal GalleryPremium
- A row of panels that expand to fullscreen on click, with a selectable expand/circle/wipe image reveal style, a hover-revealed index number per panel, and staggered heading/description/button content transitions.
- Scroll Zoom Mosaic GalleryPremium
- A self-contained scroll-driven photo mosaic that starts tiny and rotated, then scales up and spins to rest as its own internal scroll container is scrolled, with mouse parallax tilt, a click-to-expand lightbox, and a light/dark toggle.
- Story ViewerPremium
- An Instagram Stories-style viewer with tap/swipe/keyboard navigation, animated per-slide progress bars, a mute toggle for video slides, a pause indicator, an optional CTA link, and a configurable thumbnail strip.
Questions
- Do the galleries lazy-load images?
- They render standard img elements with your URLs, so you can pass optimized sources (or swap in next/image) and add loading="lazy" for images below the fold.
- Are these components free?
- 15 of the 37 are free (Image Showcase, Cylinder Gallery, Gallery Flow, Photo Album, Masonry Photo Gallery, Dome Photo Sphere, Spiral Gallery, Floating Photo Wall, Poster Tunnel, 3D Product Spin Viewer, Dot Image Slider, Expand Card Grid, Product Grid Section, Motion Gallery Grid, Cinematic Stacked Gallery); the others are premium and included in All-Access.
- How do I install them?
- Free components install with the shadcn CLI, for example: npx shadcn@latest add @reactframe/<slug>. You get the full React + Tailwind source in your project, with Motion as the only animation dependency.
Related collections
Want a whole page built from these? Ask your AI to build it with ReactFrame.