Skip to content

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

Free

Warning Info Hover Card for React

A Limited time offer banner has a Details button that opens 50% off the first month, ending December 31st.

A warning-tinted banner shows an alert icon and Limited time offer, plus a Details button. The card is titled Special Promotion and states 50% off the first month, through December 31st.

Keep the banner to one line and leave the terms in the card. If Details must work on a tap, use a Popover. In React, Base UI does not apply the discount.

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

<div className="flex w-full max-w-sm items-center gap-2 rounded-lg border border-warning/30 bg-warning/10 p-3">
  <CircleAlertIcon aria-hidden="true" className="size-4 text-warning" />
  <span className="text-sm">Limited time offer</span>
  <HoverCard>
    <HoverCardTrigger
      closeDelay={100}
      delay={10}
      render={
        <button
          className="ms-auto text-warning text-xs underline underline-offset-4"
          type="button"
        />
      }
    >
      Details
    </HoverCardTrigger>
    <HoverCardContent className="max-w-full">
      <div className="flex flex-col gap-2">
        <h4 className="font-semibold text-sm">Special Promotion</h4>
        <p className="text-muted-foreground text-sm">
          Get 50% off your first month when you upgrade to Pro before the end
          of this week. This offer expires on December 31st.
        </p>
      </div>
    </HoverCardContent>
  </HoverCard>
</div>

FAQ

How is the banner colored?

With the warning token: border-warning/30 and bg-warning/10 on the banner, text-warning on the alert icon and on Details. The colors follow the theme in light and dark mode.

How is the Details button made the trigger?

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

What is in the card?

The title Special Promotion and a muted paragraph with the discount, who it applies to and when it ends.

How does Details sit at the end of the banner?

ms-auto pushes it to the end of the row, which is the right in left-to-right layouts and the left in right-to-left ones.

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 Details 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