<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Portal>
    <HoverCard.Content />
  </HoverCard.Portal>
</HoverCard.Root>

<HoverCard.Root>
  <HoverCard.Trigger>
    <Button>Hover me</Button>
  </HoverCard.Trigger>
  <HoverCard.Content>
    <div className="flex flex-col gap-2">
      <h4 className="font-bold">Hover Card Title</h4>
      <p>This content appears when you hover.</p>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

<HoverCard.Root>
  <HoverCard.Trigger>
    <Link href="/users/123">@johndoe</Link>
  </HoverCard.Trigger>
  <HoverCard.Content>
    <div className="flex gap-4">
      <Avatar>
        <AvatarImage src="/avatars/01.png" />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <div className="flex flex-col gap-2">
        <h4 className="font-bold">John Doe</h4>
        <p className="text-sm text-muted">
          Software engineer. Building awesome things.
        </p>
        <div className="flex gap-4 text-sm text-muted">
          <div>1.2k followers</div>
          <div>427 following</div>
        </div>
      </div>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

<HoverCard.Root>
  <HoverCard.Trigger>
    <Link href="/blog/getting-started">
      Getting Started with Components
    </Link>
  </HoverCard.Trigger>
  <HoverCard.Content>
    <div className="flex flex-col gap-2">
      <img 
        src="/blog/thumbnail.png" 
        alt="Article thumbnail"
        className="rounded"
      />
      <h4 className="font-bold">Getting Started with Components</h4>
      <p className="text-sm text-muted">
        Learn how to build and customize components for your next project.
      </p>
      <div className="flex items-center gap-2 text-sm text-muted">
        <CalendarIcon className="size-4" />
        <span>Posted 2 days ago</span>
      </div>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

<HoverCard.Root>
  <HoverCard.Trigger>
    <Button>Open Top</Button>
  </HoverCard.Trigger>
  <HoverCard.Content side="top" align="start" sideOffset={8}>
    <div className="flex flex-col gap-2">
      <h4 className="font-bold">Custom Position</h4>
      <p>This appears on top with start alignment.</p>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

<HoverCard.Root>
  <HoverCard.Trigger>
    <Button>Hover for Details</Button>
  </HoverCard.Trigger>
  <HoverCard.Content 
    panelProps={{ 
      color: "primary",
      padding: "lg" 
    }}
  >
    <div className="flex flex-col gap-2">
      <h4 className="font-bold">Styled Panel</h4>
      <p>Using panel props for custom styling.</p>
    </div>
  </HoverCard.Content>
</HoverCard.Root>