StorybookGitHub

Hover Card

For sighted users to preview content available behind a link.

@shadcn

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/hover-card.json

Usage

Use a hover card to show rich preview content when the user hovers a trigger. Built on Base UI Preview Card.

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/hover-card/hover-card";

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger href="https://github.com/shadcn">
        @shadcn
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="flex flex-col gap-2">
          <p className="font-medium">@shadcn</p>
          <p className="text-muted-foreground text-sm">
            The React library for building web applications.
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

Position with side, sideOffset, align, and alignOffset on HoverCardContent.