react-lightbox

A responsive lightbox component for React with keyboard navigation and accessibility support. Distributed via shadcn/ui registry.

Installation

npx shadcn@latest add https://react-lightbox-nu.vercel.app/r/lightbox.json

Usage

import { Lightbox } from "@/components/lightbox"

const images = [
  {
    src: "https://example.com/image1.jpg",
    alt: "Image 1",
    caption: "Beautiful landscape",
  },
  {
    src: "https://example.com/image2.jpg",
    alt: "Image 2",
    caption: "Mountain view",
  },
]

export function Gallery() {
  return <Lightbox images={images} loop className="grid-cols-3" />
}

Props

Prop	Type	Default	Description
images	LightboxImage[]	-	Array of image objects with src, alt, and caption
loop	boolean	false	Enable looping from last to first image
className	string	-	Additional CSS classes for the thumbnail container

LightboxImage

interface LightboxImage {
  src: string
  alt?: string
  caption?: string
}

Features

• Keyboard navigation (Arrow keys, Escape)
• Image preloading for smooth transitions
• Optional loop navigation
• Accessible with ARIA attributes and focus trap
• Customizable via className prop
• Loading spinner for large images
• Image captions support
• Click outside to close

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build the registry
pnpm registry:build

# Build production
pnpm build

Registry Structure

This project uses the shadcn/ui registry format:

• registry.json - Registry configuration
• registry/new-york/blocks/lightbox/ - Component source files
• public/r/ - Built registry output (generated by pnpm registry:build)

Documentation

Visit the shadcn documentation to view the full registry documentation.

License

MIT