# Shadcn Icon

> Hover card with icon

- Type: example, free and open source (MIT)
- Component: [Hover Card](https://reui.io/components/hover-card.md)
- Page: https://reui.io/components/hover-card/c-hover-card-4
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/hover-card.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/hover-card.md
- MCP: `get_example("c-hover-card-4")`
- Registry item: https://reui.io/r/styles/base-nova/c-hover-card-4.json
- Uses: Button, Hover Card

## Best for

A feature callout on an outline button, an amber bolt icon beside a short title and a muted blurb

## When not to use

- A plain heading over one line of copy with no icon: use [Basic](https://reui.io/components/hover-card/c-hover-card-1.md) (`get_example("c-hover-card-1")`)

## Install

```bash
npx shadcn@latest add @reui/c-hover-card-4
```

## About Shadcn Hover Card

### When to use

- Profile previews on a person's name or avatar, with photo, handle, role and join date
- Feature, image and release note previews shown on hover or focus of a button or link
- Exact dates and times behind a short inline label, such as a relative deploy time in a sentence

### When not to use

- Content opened by a click or tap, such as a form or settings to change: use [Popover](https://reui.io/components/popover.md) (`get_component("popover")`)
- A one line label that names an icon button or a control: use [Tooltip](https://reui.io/components/tooltip.md) (`get_component("tooltip")`)
- Content that stays visible in the page layout without a pointer over it: use [Card](https://reui.io/components/card.md) (`get_component("card")`)

### Agent notes

- Timing is `delay` and `closeDelay` on the base `HoverCardTrigger` but `openDelay` and `closeDelay` on the radix `HoverCard` root
- Without `render` on the base twin or `asChild` on radix, `HoverCardTrigger` renders a link with no href, which Tab skips
- The radix `HoverCardContent` sets tabindex -1 on every link and button inside it, so keep keyboard actions outside the card

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.