shadcn.io is not affiliated with official shadcn/ui
Shadcn Image Zoom for React and Tailwind
Click to zoom images, SVG, and diagrams.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/image-zoom.jsonpnpm dlx shadcn@latest add https://kit.dev/r/image-zoom.jsonnpx shadcn@latest add https://kit.dev/r/image-zoom.jsonyarn shadcn@latest add https://kit.dev/r/image-zoom.jsonInstall the following dependencies:
bun add react-medium-image-zoompnpm add react-medium-image-zoomnpm install react-medium-image-zoomyarn add react-medium-image-zoomAdd the following to your globals.css.
[data-rmiz-btn-zoom], [data-rmiz-btn-unzoom] {
display: none;
}
[data-rmiz-content="found"] img, [data-rmiz-content="found"] svg, [data-rmiz-content="found"] [role="img"], [data-rmiz-content="found"] [data-zoom] {
cursor: zoom-in;
}
[data-rmiz-ghost] {
pointer-events: none;
position: absolute;
}
[data-rmiz-modal-content] {
height: 100%;
position: relative;
width: 100%;
}
[data-rmiz-modal-img] {
cursor: zoom-out;
image-rendering: high-quality;
position: absolute;
transform-origin: 0 0;
transition: transform 0.3s;
}
[data-rmiz-modal-overlay] {
inset: 0;
position: absolute;
transition: background-color 0.3s;
}
[data-rmiz-modal-overlay="hidden"] {
background-color: transparent;
}
[data-rmiz-modal-overlay="visible"] {
background-color: var(--background);
}
[data-rmiz-modal]::backdrop {
display: none;
}
[data-rmiz-modal]:focus-visible {
outline: none;
}
[data-rmiz-modal][open] {
background-color: transparent;
border: 0;
height: 100dvh;
margin: 0;
max-height: none;
max-width: none;
overflow: hidden;
padding: 0;
position: fixed;
width: 100dvw;
}
[data-rmiz] {
display: block;
position: relative;
}
@media (prefers-reduced-motion: reduce) {
[data-rmiz-modal-overlay], [data-rmiz-modal-img] {
transition-duration: 0.01ms !important;
}
}Copy and paste the following code into your project.
"use client";
import type React from "react";
import Zoom, { type UncontrolledProps } from "react-medium-image-zoom";
import { cn } from "@/lib/utils";
export interface ImageZoomProps
extends Omit<React.ComponentProps<"img">, "children"> {
/**
* Custom trigger. Zoom finds the first `img`, `svg`, `[role="img"]`, or `[data-zoom]`.
*/
children?: React.ReactNode;
/**
* Props for `react-medium-image-zoom`.
*/
rmiz?: Omit<UncontrolledProps, "children" | "zoomImg">;
/**
* Image props when zoomed. Defaults to the trigger `src`.
*/
zoomInProps?: React.ComponentProps<"img">;
}
export const ImageZoom = (props: ImageZoomProps) => {
const {
alt = "",
children,
className,
height,
rmiz,
width,
zoomInProps,
...rest
} = props;
const src = typeof rest.src === "string" ? rest.src : undefined;
const zoomImg =
src === undefined && zoomInProps === undefined
? undefined
: { src, ...zoomInProps };
return (
<Zoom wrapElement="span" zoomMargin={20} {...rmiz} zoomImg={zoomImg}>
{children ?? (
<img
alt={alt}
className={cn("h-auto w-full", className)}
height={height}
width={width}
{...rest}
/>
)}
</Zoom>
);
};Update the import paths to match your project setup.
Usage
import { ImageZoom } from "@/components/ui/image-zoom";<ImageZoom
alt="A desk by a window"
className="max-w-sm rounded-xl"
height={450}
src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=800&q=80"
width={800}
/>Demos
Svg
API Reference
ImageZoom
PropType