Skip to content
Fuji UI
Component

Image

Wraps a plain <img> with a loading skeleton and error fallback, no next/image dependency. Set fullscreen to make it clickable.

With ratio

Mountain lake at sunrise
  • A skeleton shimmer fills the ratio box until the image loads; pass showLoadingSkeleton={false} when the surface behind it already works as a placeholder

Fullscreen preview

Click the image, or press Enter or Space on it, to open it fullscreen. Escape or the close button closes it.

  • Built on Base UI Dialog: focus trap, escape-to-close, and scroll lock come for free
  • The close button is pinned to the photo's own top-right corner, on a scrim of its own so it reads over any image
  • The backdrop is darker than the shared overlay scrim, so the page around the photo does not compete with it

Error fallback

  • Shows a fallback icon when the image fails to load

API reference

fullscreenfalse
boolean

Click (or Enter/Space) opens a fullscreen preview overlay. Defaults to false.

ratioNone
number

width / height, e.g. 16 / 9. Omit to size intrinsically.

showLoadingSkeletontrue
boolean

Shows a skeleton shimmer until the image has loaded.

Also accepts everything from React.ImgHTMLAttributes<HTMLImageElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent