Hover CardHover Card

Props

• HoverCard–

  as the primitive

  open, defaultOpen, onOpenChange.

• HoverCardTrigger delay / closeDelay–

  number

  320ms to open (60ms when moving from another open card), 0 to close. Radix: openDelay / closeDelay on HoverCard.

• HoverCardChip–

  { initials, agent? } + trigger props

  The designed trigger: an inline chip; children are the handle.

• HoverCardContent–

  side, sideOffset, align, collisionPadding, container

  Above its trigger by default (side top, 10px), kept 12px inside the viewport, flipping below when there's no room.

• HoverCardPerson–

  { person: { name, initials, role, note, stats, status, online, agent } }

  The designed body.

Source

Installation

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.

{
  "registries": {
    "@notchset": "https://notchset.dev/r/{style}/{name}.json",
    "@notchset-pro": {
      "url": "https://notchset.dev/r/pro/{style}/{name}.json",
      "headers": { "Authorization": "Bearer ${NOTCHSET_TOKEN}" }
    }
  }
}