Hover Card

A preview card shown on hover — great for profiles and links.

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsxEditable — live

render(
  <HoverCard>
    <HoverCardTrigger asChild><Button variant="link">@stacklyui</Button></HoverCardTrigger>
    <HoverCardContent>
      <div className="flex items-center gap-3">
        <Avatar><AvatarFallback>SB</AvatarFallback></Avatar>
        <div><p className="font-semibold text-fg">StacklyUI</p><p className="text-sm text-muted">Animated, accessible React components.</p></div>
      </div>
    </HoverCardContent>
  </HoverCard>
)

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/hover-card

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Import HoverCard from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.