purrfect uiComponents

Hover preview

A list of links where hovering a row floats a preview card that trails the pointer.

Behaviour

  • Reduced motion: the card appears in place and jumps with the pointer, no scale and no trail.
  • Hovering a row floats a card that trails the pointer, with a disc that keeps up faster; another row slides the card to its preview.
  • Keyboard focus opens the card beside the focused row; touch gets plain links.
  • Positions are relative to the list (and undo any scale on an ancestor), so it works anywhere on the page.
  • React re-renders once per row change, not per pointer move. Previews mount on the first open.

Props

PropTypeDescription
items{ title, href, meta?, preview, color? }[]The rows. preview is what the floating card shows; color is its background.
labelstringdefault "View"Text on the disc that trails the card. Empty hides the disc.
cardClassNamestringClasses for the floating card: its size (400 x 300px by default).
classNamestringExtra classes on the root.

Installation

npx shadcn@latest add https://purrfectui.com/r/hover-preview.json

How to use

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

<HoverPreview
  items={[
    { title: "Mapinly", meta: "Design & development", href: "/work/mapinly", preview: <img src="/mapinly.png" alt="" /> },
    { title: "Bountydesk", meta: "Development", href: "/work/bountydesk", preview: <img src="/bountydesk.png" alt="" />, color: "#D9C8A4" },
  ]}
/>

Source code

Loading…

Credits

Ported from vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.

0