Hover Preview

Wrap any trigger to reveal a cursor-following image popover on hover — the thumbnail springs in inside a little browser frame and trails the pointer.

motion

Preview

Hover Atlas or brrt to preview each one.

Installation

Install the component using the CLI.

npx shadcn@latest add https://yash-sakre.github.io/Yash-Sakre/r/hover-preview.json

Usage

Import the component:

import { HoverPreview } from "@/components/ui/hover-preview";

Use it in your code:

<HoverPreview image="/atlas.png" href="https://atlas.dev">
  Atlas
</HoverPreview>

Props

Property	Type	Default	Description
image	string	—	Image shown in the popover.
href	string	—	Optional — adds a URL bar to the frame.
children	ReactNode	—	The trigger element you hover.
width	number	320	Popover width in px.