Hover Card - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/hover-card

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<HoverCard>
  <HoverCardTrigger>Preview</HoverCardTrigger>
  <HoverCardContent>Additional context</HoverCardContent>
</HoverCard>

API Reference

Prop	Type	Default	Description
`openDelay`	`number`	`200`	Delay in milliseconds before opening.
`closeDelay`	`number`	`100`	Delay in milliseconds before closing.

Accessibility

Built on Radix UI, which adheres to the WAI-ARIA Pattern.

Keyboard Interactions

Key	Description
`Tab`	Moves focus to or from the trigger.
`Escape`	Closes an open hover card.

Midnight Sun