║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Lens date: 2025-01-13 description: A interactive component that enables zooming into images, videos and other elements. author: h3rmel published: true

<ComponentPreview name="lens-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/lens

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="lens" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Examples

Static Lens

<ComponentPreview name="lens-demo-2" />

Lens with a Default Position

<ComponentPreview name="lens-demo-3" />

Usage

import { Lens } from "@/components/ui/lens"

<Lens>
  <img src="/images/lens-demo.jpg" alt="Lens Demo" />
</Lens>

Props

| Property | Type | Default | Description | | ----------------- | ----------------- | ------- | ---------------------------------------------------------- | | children | React.ReactNode | - | The content that will be magnified by the lens | | zoomFactor | number | 1.3 | The magnification factor of the lens | | lensSize | number | 170 | The size of the lens in pixels (works as a diameter) | | position | Position | - | The current position of the lens | | defaultPosition | Position | - | The initial position of the lens | | isStatic | boolean | false | Determines if the lens will remain in a fixed position | | duration | number | 0.1 | Duration of the animation when the lens moves (in seconds) | | lensColor | string | - | The color of the lens (CSS color value) | | ariaLabel | string | - | Accessibility label for the lens component |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║