122k
New

Hover Card

PreviousNext

A popover that appears on hover, focus, or long press to preview content available behind a link.

Base UIReact AriaRadix UI
"use client"

import { Button } from "@/components/ui/button"

Installation

pnpm dlx shadcn@latest add hover-card

Usage

import { HoverCard, HoverCardTrigger } from "@/components/ui/hover-card"
<HoverCardTrigger>
  <Button variant="link">Hover</Button>
  <HoverCard>
    The React Framework – created and maintained by @vercel.
  </HoverCard>
</HoverCardTrigger>

Composition

Use the following composition to build a HoverCard:

HoverCardTrigger
├── Button
└── HoverCard

Trigger Delays

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

<HoverCardTrigger delay={100} closeDelay={200}>
  <Button variant="link">Hover</Button>
  <HoverCard>Content</HoverCard>
</HoverCardTrigger>

Positioning

Use the placement prop on HoverCard to control placement.

<HoverCardTrigger>
  <Button variant="link">Hover</Button>
  <HoverCard placement="top">Content</HoverCard>
</HoverCardTrigger>

Basic

"use client"

import { Button } from "@/components/ui/button"

Sides

"use client"

import { Button } from "@/components/ui/button"

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import {

API Reference

See the React Aria documentation for more information.