Components
Loading preview...
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
npx shadcn@latest add https://21st.dev/r/fuma-nama/zoomable-imageimport { 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 }