Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Image Crop
Next: 3d Card

Image Zoom

Click-to-zoom image viewer with blurred backdrop for React

Click to expand images full-screen with a blurred backdrop. Image scales smoothly from its position to fill the viewport. Click the backdrop or image to zoom out. Respects prefers-reduced-motion. Great for product photos, portfolios, or documentation screenshots.

Image Zoom preview

Scroll to load preview

Installation

Pixel Image

Grid reveal animation

Animated Modal

Click-to-expand

Comparison

Before/after slider

FAQ

Was this page helpful?

Sign in to leave feedback.

Image Crop

Image cropping interface with aspect ratio locking for React

3d Card

Mouse-tracking 3D tilt card with hover effects for React