Hover Card

For sighted users to preview content available behind a link. Built on Base UI's preview card primitive.

Last updated January 1, 1980

CreditsUnchangedPublished

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/hover-card

Usage

import {
 
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
 
export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger href="#">@shadcn</HoverCardTrigger>
      <HoverCardContent>Preview content</HoverCardContent>
    </HoverCard>
  )
}

Examples

RTL

Base UI reports the popup's resolved side as inline-start / inline-end rather than a fixed left/right, so positioning and entry animation stay correct under RTL without any extra work.

API Reference

HoverCard

Prop	Type	Default	Description
open	boolean	undefined	Whether the hover card is open. Use when controlled.
defaultOpen	boolean	false	The initial open state when uncontrolled.
onOpenChange	(open, details) => void	—	Called when the open state changes.

HoverCardContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Which side of the trigger to render against.
sideOffset	number	4	Distance in pixels from the trigger.
align	"start" \| "center" \| "end"	"center"	Alignment against the trigger.
alignOffset	number	4	Offset in pixels from the aligned edge.

Edit this page on GitHub

PreviousField NextInput