Image Preview

Overview

An image preview component with zoom, lightbox, and gallery support.

This media component is intended for interfaces that need an image preview component with zoom, lightbox, and gallery support, landing pages, and portfolio pages. Its implementation is provided as editable source so the final behavior and styling stay inside your project.

Technologies

React
TypeScript
Tailwind CSS
Radix UI
Next.js

Detected package dependencies: lucide-react, @radix-ui/react-dialog.

@spectrumui/image-preview
Preview image

Installation

Login to view commandCreate a free account to access the install command

Create a new file called ImagePreview.tsx in the components

Usage

The live preview and its Code tab above are the working example for this component. Copy the example after installation, then provide the required values from its TypeScript signature.

Props

PropTypeRequiredDescription
srcstringYesValue accepted by the src property in the exported source type.
altstringNoValue accepted by the alt property in the exported source type.
widthnumberYesValue accepted by the width property in the exported source type.
heightnumberYesValue accepted by the height property in the exported source type.
classNamestringNoAdditional classes accepted by the component source.

Use cases

  • interfaces that need an image preview component with zoom, lightbox, and gallery support
  • landing pages
  • portfolio pages

Features

  • Copy-paste source that remains in your repository
  • TypeScript source included with the component
  • Tailwind CSS classes editable in the component source

Accessibility

  • The source uses Radix UI primitives for the interactions detected on this component.
  • Test focus order, keyboard operation, labels, contrast, and screen-reader output in the final application context.

Customization

  • Edit the Tailwind utility classes in the copied source to match your spacing, color, and typography tokens.
  • Use the documented className surface for local layout adjustments, then edit the source for structural changes.

Related components

3D Event Badge
An interactive 3D event badge rendered with Three.js and React Three Fiber.
Scratch Card
A scratch-to-reveal card that wipes away a canvas foil overlay on drag.
Animated Card
A card that animates on hover to showcase tools, technologies, and features.
Avatar Stack
An overlapping avatar row that fans apart on hover with springy name tooltips.

Topic guides

See how this component fits into broader interface patterns, implementation decisions, and working examples.

Next.js UI LibraryLanding Page ComponentsHero Sections

Image Preview FAQ

Is Image Preview free to use in commercial projects?

Yes. The public Image Preview source is available under the Apache License 2.0, including for commercial use, subject to the LICENSE terms.

How do I install Image Preview?

Run npx shadcn@latest add @spectrumui/image-preview. The page also exposes the source for manual installation.

Does Image Preview require Motion?

No Motion dependency was detected in the documented source or registry entry for Image Preview.

Does Image Preview use shadcn/ui or Radix UI?

No shadcn/ui or Radix UI dependency was detected in the documented Image Preview source.

Can I use Image Preview in Next.js?

The documented React source is used in this Next.js application. Keep its use client directive when copying it into the App Router. Install the detected dependencies and verify any application-specific data or image configuration.

What accessibility checks should I run for Image Preview?

The source includes Radix UI primitives. Test the finished interface with keyboard and screen-reader workflows.