Hover Card

A card that appears when hovering over a trigger element. Useful for showing preview information like user profiles or link details.

Basic Hover Card

@substrate_ui

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="#" className="underline text-sm font-medium">
      @substrate_ui
    </a>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="space-y-2">
      <h4 className="text-sm font-semibold">SubstrateUI</h4>
      <p className="text-sm text-muted-foreground">
        A premium component library for building modern
        web applications.
      </p>
      <p className="text-xs text-muted-foreground">
        Joined December 2024
      </p>
    </div>
  </HoverCardContent>
</HoverCard>

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the hover card.
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the open state changes.