ImageViewer

ImageViewer provides a reusable, token-driven control for product interfaces. Available in the React renderer; no page-specific styling is required.

#Default usage

ImageViewer

Open an image gallery in a keyboard-accessible modal with navigation and zoom.

View image

A quiet place to build your next product.

<ImageViewer
  label="Workspace gallery"
  images={[
    { src: "/enter-ui/assets/workspace-studio.jpg", alt: "A calm workspace studio", caption: "A quiet place to build your next product." },
    { src: "/enter-ui/examples/products/commerce.jpg", alt: "FroggCommerce product example", caption: "A product example built with EnterUI." },
  ]}
/>

#Import

import { ImageViewer } from "@froggdesign/enter-ui-react";

#Patterns

Try the interactive ImageViewer preview on the New components page.

#Accessibility

Every image requires descriptive alt text. The trigger opens a named Radix modal with focus containment. Escape closes and returns focus to the trigger; Left/Right arrow keys navigate images. At 2x zoom, Tab can focus the image viewport and arrow keys pan it; and Tab reaches navigation, zoom, and close buttons. Boundary controls are disabled and the image counter is announced politely. Existing Media loading and error fallbacks remain available. The modal fits narrow viewports without hiding its controls.

#API

• images: { src, alt, caption? } array. Empty arrays show a stable empty state.
• label: modal title and trigger name; default Image gallery.
• index, defaultIndex, onIndexChange: selected image, controlled or uncontrolled. Index is clamped to available images; navigation stops at the ends.
• open, defaultOpen, onOpenChange: controlled or uncontrolled modal visibility.
• Extends wrapper div props and forwards the wrapper ref.
• Zoom switches between 1x and 2x; the enlarged viewport scrolls in both directions. Navigating or reopening resets zoom.

#Styling

The component owns its token-based styles in the shared EnterUI stylesheet. Import @froggdesign/enter-ui-react/styles.css once at the application root. Theme boundaries supply light and dark colors; use public props and composition in consuming pages.