shadcn.io is an independent project built on shadcn/ui
The label API Rate Limit sits next to an info icon. The card is titled Rate Limiting and lists 100 requests an hour, 1,000 an hour, and unlimited.
Use it when a setting needs a title and more than one line. One short line belongs in a Tooltip. In Svelte, Ark UI lets people select the text in the card.
Installation
Anatomy
Usage
<div class="flex items-center gap-2"><span class="text-sm">API Rate Limit</span><HoverCard><HoverCardTrigger>{#snippet asChild(props)}<button {...props({ "aria-label": "About API rate limits", class: "text-muted-foreground", type: "button" })}><InfoIcon aria-hidden="true" class="size-4" /></button>{/snippet}</HoverCardTrigger><HoverCardContent><div class="flex flex-col gap-2"><h4 class="font-semibold text-sm">Rate Limiting</h4><p class="text-muted-foreground text-sm">Free tier: 100 requests per hour<br />Pro tier: 1,000 requests per hour<br />Enterprise: Unlimited requests</p></div></HoverCardContent></HoverCard></div>FAQ
What is in the card?
The title Rate Limiting and a muted paragraph with one line per plan: Free, Pro and Enterprise, separated by line breaks.
How is the info icon made the trigger?
HoverCardTrigger renders the info icon through its asChild snippet.
How is the icon button named?
The InfoIcon is hidden from assistive tech, so the button carries aria-label="About API rate limits". Name it after what the card explains.
Should this be a tooltip instead?
A Tooltip suits one short line. This card has a title and several lines, which a hover card holds better, and its text can be selected.
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.
Set openDelay and closeDelay on HoverCard; they default to 10 and 100. positioning picks another side than the bottom.
Does the card open from the keyboard and on touch screens?
Focusing the icon button opens the card, moving focus away or pressing Escape closes it. The icon button carries an aria-label, so it is announced by name. 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.
