Data Display

Image

Image viewer with zoom-on-hover preview, fallback, a responsive grid layout, and a fullscreen lightbox with keyboard navigation.

Single image with zoom preview

Grid — click to open lightbox

Installation

npx benflux-ui add image

Usage

import { Image, ImageGrid, ImageLightbox } from "@benflux-ui/react"

// Single image with zoom preview on hover
<Image src="/photo.jpg" alt="Photo" width={300} height={200} preview />

// Responsive grid
<ImageGrid
  images={photos}
  columns={3}
  gap={8}
  onImageClick={(img, index) => setLightboxIndex(index)}
/>

// Fullscreen lightbox (keyboard: arrows + Esc)
{open && (
  <ImageLightbox
    images={photos}
    initialIndex={lightboxIndex}
    onClose={() => setOpen(false)}
  />
)}

Props — Image

Prop	Type	Default	Description
src*	string	—	Image source URL
alt*	string	—	Accessible alt text
width	number	—	Display width in pixels
height	number	—	Display height in pixels
preview	boolean	false	Show zoom icon on hover and open lightbox on click
fallback	string	—	Fallback URL if the image fails to load

Props — ImageGrid

Prop	Type	Default	Description
images*	{ src: string; alt: string; width?: number; height?: number }[]	—	Array of image objects
columns	number	3	Number of grid columns
gap	number	8	Gap between images in pixels
onImageClick	(image: object, index: number) => void	—	Called when an image is clicked