Hover Card

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/preview-card.json

npx shadcn@latest add https://prototyper-ui.com/r/preview-card.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/preview-card.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/preview-card.json

This will add the following files to your project:

components/ui/preview-card.tsx

Usage

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

<HoverCard>
  <HoverCardTrigger href="https://example.com">
    @example
  </HoverCardTrigger>
  <HoverCardContent>
    <p>Preview content here.</p>
  </HoverCardContent>
</HoverCard>

Anatomy

<HoverCard>
  <HoverCardTrigger />
  <HoverCardContent>
    {/* your preview content */}
  </HoverCardContent>
</HoverCard>

Sub-component	`data-slot`	Purpose	Required
`HoverCard`	`hover-card`	Root provider, manages open/close state	Yes
`HoverCardTrigger`	`hover-card-trigger`	Link element that shows the card on hover	Yes
`HoverCardContent`	`hover-card-content`	The popup panel anchored to the trigger	Yes

Styling

Data Slots

Use data-slot attributes to target specific parts of the hover card:

Slot name	Element
`hover-card`	Root provider (no DOM rendered)
`hover-card-trigger`	The trigger link element
`hover-card-portal`	Portal container
`hover-card-content`	The popup panel

Customization Examples

/* Make hover card wider */
[data-slot="hover-card-content"] {
  @apply w-80;
}

/* Style the trigger link */
[data-slot="hover-card-trigger"] {
  @apply underline decoration-foreground/30 underline-offset-4;
}

{/* Override styles via className */}
<HoverCardContent className="w-96 p-6">
  {/* Rich preview content */}
</HoverCardContent>

API Reference

Root component that manages open/close state. The card opens when the trigger is hovered.

Prop

Type

All Base UI PreviewCard.Root props are forwarded via ...props.

HoverCardTrigger

The link element that shows the hover card when hovered. Renders an <a> element by default.

Prop

Type

All Base UI PreviewCard.Trigger props are forwarded via ...props.

HoverCardContent

The popup panel rendered inside a portal with a positioner.

Prop

Type

All Base UI PreviewCard.Popup props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`Escape`	Closes the hover card

ARIA Attributes

The trigger renders as an <a> element, providing native link semantics.
The hover card is intended for sighted users as a progressive enhancement -- the link remains functional without the card.
Content inside the card is not announced to screen readers unless focused.
The card opens on hover with a default delay of 600ms and closes with a 300ms delay.

On this page