Hover Card

For sighted users to preview content available behind a link.

1
import { Button } from "@/components/ui/pxl/button"
2
import {
3
  HoverCard,
4
  HoverCardContent,
5
  HoverCardTrigger,
6
} from "@/components/ui/pxl/hover-card"
7

8
export default function HoverCardDemo() {
9
  return (
10
    <HoverCard>
11
      <HoverCardTrigger delay={10} closeDelay={100} render={<Button variant="link">Hover Here</Button>} />
12
      <HoverCardContent className="flex w-64 flex-col gap-0.5">
13
        <div className="font-semibold">@pxl-ui</div>
14
        <div>The React Framework – created and maintained by @gotchu-creatures.</div>
15
        <div className="mt-1 text-xs text-muted-foreground">
16
          Joined December 2026
17
        </div>
18
      </HoverCardContent>
19
    </HoverCard>
20
  )
21
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/hover-card

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
"use client";
2

3
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
4

5
import { cn } from "@/lib/utils";
6

7
function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
8
  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
9
}
10

11
function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
12
  return (
13
    <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
14
  );
15
}
16

17
function HoverCardContent({
18
  className,
19
  side = "bottom",
20
  sideOffset = 4,
21
  align = "center",
22
  alignOffset = 4,
23
  ...props
24
}: PreviewCardPrimitive.Popup.Props &
25
  Pick<
26
    PreviewCardPrimitive.Positioner.Props,
27
    "align" | "alignOffset" | "side" | "sideOffset"
28
  >) {
29
  return (
30
    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
31
      <PreviewCardPrimitive.Positioner
32
        align={align}
33
        alignOffset={alignOffset}
34
        side={side}
35
        sideOffset={sideOffset}
36
        className="isolate z-50"
37
      >
38
        <PreviewCardPrimitive.Popup
39
          data-slot="hover-card-content"
40
          className={cn(
41
            "z-50 w-64 origin-(--transform-origin) pixel-border pixel-size-lg pixel-color-[color-mix(in_oklab,var(--foreground)_10%,transparent)] bg-popover p-4 text-sm text-popover-foreground outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
42
            className
43
          )}
44
          {...props}
45
        />
46
      </PreviewCardPrimitive.Positioner>
47
    </PreviewCardPrimitive.Portal>
48
  );
49
}
50

51
export { HoverCard, HoverCardContent, HoverCardTrigger };

Update the import paths to match your project setup.

Usage

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

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @gotchu-creatures.
  </HoverCardContent>
</HoverCard>

Composition

Use the following composition to build a HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Trigger Delays

Use delay and closeDelay on the trigger to control when the card opens and closes.

1
<HoverCard>
2
  <HoverCardTrigger delay={100} closeDelay={200}>
3
    Hover
4
  </HoverCardTrigger>
5
  <HoverCardContent>Content</HoverCardContent>
6
</HoverCard>

Positioning

Use the side and align props on HoverCardContent to control placement.

1
<HoverCard>
2
  <HoverCardTrigger>Hover</HoverCardTrigger>
3
  <HoverCardContent side="top" align="start">
4
    Content
5
  </HoverCardContent>
6
</HoverCard>

API Reference

See the Base UI documentation for more information.