Velora UI

Lens

Circular magnifier that follows the pointer or arrow keys to zoom into an image.

  • 1.7 KB gzipped
  • Zero dependencies
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0
Close-up of a circuit board covered in chips and components

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/lens.json

Adds components/velora/lens.tsx.

Examples

Product inspector

A product photo with a stronger zoom, a caption and a buy box.

Black over-ear headphones on a yellow background
Hover to inspect the stitching — or focus the photo and use the arrow keys.

New · Audio

Aria Over-Ear

Memory-foam cushions wrapped in protein leather, with 40 hours of adaptive noise cancelling.

$249

Colours

  • Graphite
  • Sand
  • Sage

Props

PropTypeDefault
children*

The content to magnify, usually an `<img>` that fills the box

React.ReactNode—
zoomFactor

How many times the lens magnifies

number2
radius

Lens radius in px

number80
staticPosition

Pin the lens open at this spot (percentages of width and height) and ignore the pointer — handy for touch screens and product callouts

{ x: number; y: number }—

Also accepts every <div> attribute, forwarded to the root element.

Accessibility

Reduced motion
The lens tracks the pointer directly with no easing, and appears and hides without a fade or scale.
Keyboard
The wrapper is a tab stop; keyboard focus shows the lens at its last position, arrow keys move it (Shift for larger steps) and Escape hides it. With staticPosition the lens stays pinned.
Screen readers
Content is read once from the original children; the magnified copy is aria-hidden and inert, so its links and images are neither announced nor focusable.