Components
Zoomable Image
A responsive image component with zoom functionality, built on top of Next.js Image and react-medium-image-zoom.
Features
- Built on top of Next.js Image
- Smooth zoom animations
- Keyboard navigation
- Screen reader support
- Responsive design
- Custom zoom controls
- Reduced motion support
import { ImageZoom } from "@/components/ui/zoomable-image"
function ImageZoomDemo() {
return (
<div className="mx-auto max-w-2xl space-y-8">
<div className="grid gap-8 sm:grid-cols-2">
<ImageZoom
src="https://fumadocs.vercel.app/banner.png"
alt="Fumadocs Banner"
width={400}
height={300}
/>
<ImageZoom
src="https://fumadocs.vercel.app/banner.png"
alt="Fumadocs Banner"
width={400}
height={300}
/>
</div>
</div>
)
}
export { ImageZoomDemo }Dependencies
Tags
Source
Published
Similar components
Explore more
Part of Fumadocs — browse the full library on 21st.dev.