An @mention that shows a profile card on hover, with an underline that fills while the open delay runs and a grace period so the pointer can travel into the card. Includes a contribution grid, a follow toggle with a live count and keyboard access on focus.
Jonah Kim · #payments · 10:42
Refund retries are idempotent now. Huge thanks to
npx shadcn@latest add https://hyperblur.dev/r/popover-hover-profile.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popover-hover-profile.tsx.
import { PopoverHoverProfile } from "@/components/hyperblur/popover-hover-profile"
<p>Reviewed by <PopoverHoverProfile /></p>| Prop | Type | Default | Description |
|---|---|---|---|
| user | PopoverHoverProfileUser | Mara Lindqvist | { handle, name, role, location, localTime, bio, repos, followers, following, online? }. Cover and avatar colors are derived from the handle. |
| children | ReactNode | "@handle" | Content of the mention trigger. |
| openDelay | number | 380 | Milliseconds of hover before the card opens. The underline fills over the same time. |
| closeDelay | number | 220 | Grace period in milliseconds after the pointer leaves. |
| side | "bottom" | "top" | "bottom" | Where the card opens. |
| defaultFollowing | boolean | false | Initial follow state. |
| onFollowChange | (following: boolean) => void | Called when Follow is toggled. | |
| onMessage | () => void | Called by the message button. | |
| embedded | boolean | false | Keep the card open in normal flow, for previews. |
| accent | string | "#2f7bff" | Mention, intent line and contribution grid color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |