Image Zoom

Image zoom is a component that allows you to zoom in on an image.

Powered by

react-medium-image-zoom

Placeholder image

Installation

npx kibo-ui@latest add image-zoom

Features

Zoom in on images with a click or tap
Customizable zoom button appearance and position
Smooth transitions for zooming in and out
Customizable backdrop with blur effect
Support for both controlled and uncontrolled zoom states
Accessible keyboard navigation
Touch-friendly for mobile devices
Customizable styling through className props
Reduced motion support for animations
Works with any image, SVG, or element with role="img"

Examples

Custom backdrop

Placeholder image

Custom margin

Placeholder image

Image Crop

A component that allows users to crop images with customizable aspect ratios and circular cropping options.

Ticker

A composable finance ticker for displaying symbols, prices and changes.