vibecodng.com

Free MCP betaIndex and tools live

Measured entry

uilayouts-hovercard1

hover-effect3dmotion on file

A single TSX image card distributed as a shadcn registry item. It uses Next.js Image, a Lucide icon, and Tailwind utility classes for image zoom and an expanding action button. The registry declares Motion, although the component does not use it, and the supplied photo is loaded from an external host.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of uilayouts-hovercard1 at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of uilayouts-hovercard1 at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of uilayouts-hovercard1 at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for uilayouts-hovercard1
BuildOK
MountOK
Console errors1
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal24.4 KB (89.8 KB build, 65.4 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

CONSOLE

Failed to load resource: the server responded with a status of 404 (Not Found)

BARE BUILD

✗ Build failed in 1.68s
error during build:
[vite]: Rollup failed to resolve import "lucide-react" from "<sandbox>re-bccbc66b3699/src/cut/registry/components/card/hover-card1.tsx".

Verdict

A workable visual shell, but its name oversells the interaction. The verified render exposed a failed external photo, and the call to action is inert until wired. Use it as a starting point for a Next.js gallery tile, not as a finished hover-card pattern.

Use it if

  • You need a compact image tile whose label and action sit over the lower edge.
  • Your Next.js project already uses Tailwind and permits the chosen remote image host.
  • You are prepared to connect the action button to real navigation or application behavior.

Skip it if

  • You need a true informational hover card that opens contextual content from a trigger.
  • Your primary audience uses touch or keyboard input, since the expanding affordance is designed around hover.
  • You cannot rely on a remote image or do not want to replace the bundled photo URL.
  • You want a ready-made link, because the Visit control has no destination or click behavior.

Install

Installation record for uilayouts-hovercard1
Declared dependenciesmotion
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

Copy the component into your project, install lucide-react, and provide Tailwind CSS. In a non-Next React app, replace Next.js Image with your image component. Replace or allowlist the remote photo host, wire the button, and remove the unused Motion dependency if your registry tooling added it.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/ui-layouts/uilayouts
License
MIT
Record published
2026-08-13

Alternatives

Other published entries for the hover-effect pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.