Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hover Card examples · Info

Warning Info Hover Card for React

A warning banner whose Details link opens a card with the terms of the promotion.

Framework
UI library

A tinted banner, Limited time offer, with a Details button that opens the promotion's terms. The banner stays one line, and the fine print is a hover away.

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

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.

All 20 hover card examples