Image zoom

InstallationCopy Anchor Link

npx shadcn@latest add @docscn/image-zoom

UsageCopy Anchor Link

ImageZoom takes the props of Next.js' Image. To make every image in your content zoomable, render Markdown images with it in components/mdx.tsx:

import {
  ImageZoom,
  type ImageZoomProps,
} from "@/components/docs/components/image-zoom";

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultMdxComponents,
    img: (props) => <ImageZoom {...(props as ImageZoomProps)} />,
    ...components,
  } satisfies MDXComponents;
}

It's built on react-medium-image-zoom. Installing it adds the styles the zoomed image needs to your global stylesheet, with the page's --background behind the image.

PropsCopy Anchor Link