Cambio Image

PreviousNext

An interactive image component with zoom functionality using the Cambio library.

This component is based on Cambio Image by Raphael Salaja.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/cambio-image.json
Required CSS

Add the following CSS to your globals.css for proper z-index management in grid layouts:

.root {
  isolation: isolate;
}
 
[data-state="open"] {
  z-index: 999 !important;
}

Usage

import { CambioImage } from "@/components/ui/cambio-image"
 
export default function Example() {
  return (
    <CambioImage
      src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop"
      alt="Beautiful mountain landscape"
      width={800}
      height={600}
      motion="smooth"
      className="rounded-lg"
    />
  )
}

Examples

Grid Layout

Perfect for image galleries and portfolios:

Features

  • Click to zoom: Images can be clicked to open in a full-screen overlay
  • Intersection Observer: Lazy loading with optional blur-to-focus animation
  • Animation control: Toggle initial animation with enableInitialAnimation prop
  • Motion presets: Customizable animation styles (smooth, snappy, bouncy, reduced)
  • Dismissible: Click outside or use escape key to close
  • Responsive: Automatically scales on different screen sizes
  • Grid-friendly: Proper z-index management for grid layouts

API Reference

Props

PropTypeDefaultDescription
srcstring-Required. Image source URL
altstring-Required. Image alt text for accessibility
widthnumber-Required. Image width in pixels
heightnumber-Required. Image height in pixels
loading"lazy" | "eager""lazy"Image loading strategy
indexnumber0Z-index offset for stacking multiple images
motionMotionPreset | MotionConfig"smooth"Animation preset or custom configuration
dismissiblebooleantrueWhether the zoom overlay can be dismissed
classNamestring-Additional CSS classes for styling
draggablebooleanfalseWhether the image can be dragged
enableInitialAnimationbooleantrueEnable blur-to-focus animation when image enters viewport
dismissOnImageClickbooleanfalseAllow dismissing the zoomed image by clicking on it

Motion Presets

PresetDescription
"smooth"Default smooth animation
"snappy"Quick, snappy transitions
"bouncy"Bouncy spring animation
"reduced"Reduced motion for accessibility

Motion Configuration

For advanced users, you can provide a custom motion configuration:

<CambioImage
  motion={{
    trigger: "smooth",
    popup: "bouncy",
    backdrop: "reduced",
  }}
  // ... other props
/>

Disabling Initial Animation

To disable the blur-to-focus animation and show images immediately:

<CambioImage
  src="your-image-url"
  alt="Description"
  width={800}
  height={600}
  enableInitialAnimation={false}
/>