Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hover Card examples · Info

Info with Icon and Badge Hover Card for React

A Verified badge that opens a card explaining what the verification means.

Framework
UI library

A Verified badge that explains itself. Resting the pointer on it opens a card with a shield, a title and a sentence on what verification means. Use it for verified accounts, certifications and security labels whose meaning isn't obvious from the badge alone.

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?

A shield on a round tinted tile, bg-success/10 behind a text-success icon, beside the title Verified Account and a muted sentence. The tile has shrink-0, so long text wraps instead of squeezing it.

How is the badge made the trigger?

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

Why wrap the Badge in a button?

A Badge is a plain span and can't take focus. The button around it, with rounded-full to follow its shape, gives keyboard users a way to open the card.

How wide is the card?

The default hover card width. Set a width class such as w-80 on the card to fit longer content.

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