Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hover Card examples · Preview

Image Preview Hover Card for React

A file name that opens a card with a thumbnail of the image and its dimensions and size.

Framework
UI library

A file chip, hero-banner.jpg, opens a card with a 16:9 thumbnail of the image and its dimensions, size and format. Use it in file lists and media libraries so people can recognize an image without opening it.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What is in the card?

An aspect-video frame with the image cropped to fill it, object-cover, then the file name and 1920 × 1080 · 1.2 MB · JPEG.

How is the file chip made the trigger?

HoverCardTrigger takes the file chip through render, a button with its classes.

What alt text does the thumbnail need?

A short description of the picture, as the demo gives. The file name is already beside it, so don't repeat it.

How wide is the card?

w-80 on the card, for the extra content. The class is on HoverCardContent. max-w-full keeps it inside narrow screens.

How do I change how fast the card opens and closes?

The card opens a moment after the pointer rests on the trigger and stays up long enough for the pointer to move into it. Both delays are in milliseconds. The demo sets delay 10 and closeDelay 100 on HoverCardTrigger. side and align on HoverCardContent place it.

Does the card open from the keyboard and on touch screens?

Focusing the file chip opens the card, moving focus away or pressing Escape closes it. Touch screens have no hover, so keep what matters reachable elsewhere, or use a Popover when the card has to open on a tap.

All 20 hover card examples