Animated Image Gallery with Lightbox in React and Tailwind CSS

Image gallery is useful for portfolios, landing pages, creative showcases, and any app where you want to highlight visual content.

Image Gallery with Lightbox

Features

• Responsive grid layout using Tailwind CSS
• Click-to-open fullscreen modal (lightbox)
• Smooth animations using Framer Motion
• Keyboard navigation (← → Esc)
• Infinite next/previous navigation
• Touch swipe support for mobile
• Background blur overlay
• Image title and optional caption
• Clickable thumbnails with active highlight
• Scroll lock when modal is open
• Clean and reusable component structure

UI Preview

Image Gallery with Lightbox and Thumbnails Code

Preview

Creative Assets Library

Browse stunning visuals sourced from Unsplash. Ideal for portfolios, landing pages, or product mockups.

A beautiful lake

Gray laptop computer

Circuit board macro

Mountain landscape

Starry night

Ocean wave

Modern architecture

How to Use This Component (Step-by-Step Guide)

1. Install Required Packages

   You'll need framer-motion and lucide-react:

   1npm install framer-motion lucide-react

2. Prepare Your Image Data

   Create an array of image objects with the following shape:

1export const galleryImages = [
2  {
3    id: 1,
4    title: 'Ocean Wave',
5    src: 'https://images.unsplash.com/...',
6    thumbnail: 'https://images.unsplash.com/...',
7    caption: 'A serene view of the ocean during sunset.',
8  },
9  // Add more images...
10]

3. Add the ImageModal Component

Copy the ImageModal.tsx code into your components/ folder.

It supports:

• Modal with blur overlay
• Next/Previous navigation (infinite loop)
• Keyboard Esc & arrow key support
• Swipe gesture on mobile
• Thumbnails & captions
• Animations with Framer Motion

4. Create the Main Gallery Component and useImageLightbox custom hook.

Don't forget to let me know if it helps you.