Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Image Preview Hover Card for React

The chip hero-banner.jpg opens a wide thumbnail of the image plus 1920 by 1080, 1.2 MB, and JPEG.

The trigger is a chip with an image icon and hero-banner.jpg. The card shows a 16:9 thumbnail and the line 1920 by 1080, 1.2 MB, JPEG.

Use it in a media library so people can recognize a file without opening it. A Popover covers the same preview on a tap. In React, Base UI does not fetch the picture. The demo points at one fixed image.

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

Anatomy

Hover Card anatomy: trigger, positioner, arrow, content

Usage

<HoverCard>
  <HoverCardTrigger
    closeDelay={100}
    delay={10}
    render={
      <button
        className="flex items-center gap-2 rounded-md border px-3 py-2 text-sm hover:bg-accent"
        type="button"
      />
    }
  >
    <ImageIcon aria-hidden="true" className="size-4" />
    <span>hero-banner.jpg</span>
  </HoverCardTrigger>
  <HoverCardContent className="w-80 max-w-full">
    <div className="flex flex-col gap-3">
      <div className="aspect-video overflow-hidden rounded-md bg-muted">
        <img
          alt="Abstract gradient artwork used as the hero banner"
          className="size-full object-cover"
          height={225}
          src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=225&fit=crop"
          width={400}
        />
      </div>
      <div className="flex flex-col gap-1">
        <h4 className="font-semibold text-sm">hero-banner.jpg</h4>
        <p className="text-muted-foreground text-xs">
          1920 × 1080 · 1.2 MB · JPEG
        </p>
      </div>
{/* The rest of the file is under Installation. */}

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.

API Reference

Hover Card

No extra props in this demo. The rest is on the Hover Card page.

All 20 hover card examples