Hover Card

A contextual popup that appears on hover, perfect for previewing content, user profiles, and additional information without leaving the current page.

You know when you're scrolling Twitter and hover over someone's name to see their bio? That's what hover cards do - show useful info without making you click away and lose your place.

Rich profile preview

Hover to see detailed user information:

Loading component...

Built on Radix UI, so the positioning and accessibility stuff is handled. Works with mouse, keyboard, whatever.

npx shadcn@latest add hover-card

Why hover cards just work

Ever been scared to click a link because you don't know where it goes? Or had to open a new tab just to check someone's profile? Hover cards fix that - you get a quick peek without losing your spot.

Simple content preview

Just the basics:

Loading component...

Detailed user profile

Full profile with follower counts and all that:

Loading component...

"use client"import { CalendarIcon, MapPinIcon, LinkIcon } from "lucide-react"import {  Avatar,  AvatarFallback,  AvatarImage,} from "@/components/ui/avatar"import { Button } from "@/components/ui/button"import {  HoverCard,  HoverCardContent,  HoverCardTrigger,} from "@/components/ui/hover-card"export default function HoverCardUserProfile() {  return (    <div className="flex items-center space-x-4">      <span className="text-sm text-muted-foreground">Created by</span>      <HoverCard>        <HoverCardTrigger asChild>          <Button variant="link" className="p-0 h-auto">            @shadcn          </Button>        </HoverCardTrigger>        <HoverCardContent className="w-80">          <div className="flex justify-between gap-4">            <Avatar>              <AvatarImage src="https://github.com/shadcn.png" />              <AvatarFallback>SC</AvatarFallback>            </Avatar>            <div className="space-y-1 flex-1">              <h4 className="text-sm font-semibold">@shadcn</h4>              <p className="text-sm text-muted-foreground">                Building beautiful and accessible user interfaces.              </p>              <div className="flex items-center pt-2 space-y-1 text-xs text-muted-foreground">                <div className="flex items-center">                  <CalendarIcon className="mr-1 h-3 w-3" />                  Joined March 2021                </div>              </div>              <div className="flex items-center text-xs text-muted-foreground">                <MapPinIcon className="mr-1 h-3 w-3" />                San Francisco, CA              </div>              <div className="flex items-center text-xs text-muted-foreground">                <LinkIcon className="mr-1 h-3 w-3" />                ui.shadcn.com              </div>            </div>          </div>          <div className="flex justify-between pt-4 text-xs text-muted-foreground">            <div>              <span className="font-semibold text-foreground">12.5k</span> followers            </div>            <div>              <span className="font-semibold text-foreground">542</span> following            </div>          </div>        </HoverCardContent>      </HoverCard>    </div>  )}

Product previews

Quick product info before they click:

Loading component...

"use client"import { StarIcon, ShoppingCartIcon } from "lucide-react"import { Button } from "@/components/ui/button"import {  HoverCard,  HoverCardContent,  HoverCardTrigger,} from "@/components/ui/hover-card"export default function HoverCardProduct() {  return (    <div className="flex items-center space-x-2">      <span className="text-sm">Check out this</span>      <HoverCard>        <HoverCardTrigger asChild>          <Button variant="link" className="p-0 h-auto text-blue-600">            MacBook Pro          </Button>        </HoverCardTrigger>        <HoverCardContent className="w-96">          <div className="space-y-4">            <div className="flex gap-4">              <div className="w-16 h-16 bg-gray-200 rounded-md flex items-center justify-center">                <div className="w-12 h-8 bg-gray-800 rounded-sm"></div>              </div>              <div className="flex-1 space-y-2">                <h4 className="font-semibold">MacBook Pro 14"</h4>                <p className="text-sm text-muted-foreground">                  M3 Pro chip, 18GB memory, 512GB SSD                </p>                <div className="flex items-center space-x-2">                  <div className="flex items-center">                    {[...Array(5)].map((_, i) => (                      <StarIcon key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />                    ))}                  </div>                  <span className="text-sm text-muted-foreground">(124 reviews)</span>                </div>              </div>            </div>            <div className="flex items-center justify-between pt-2 border-t">              <div>                <span className="text-2xl font-bold">$2,399</span>                <span className="text-sm text-muted-foreground line-through ml-2">$2,599</span>              </div>              <Button size="sm">                <ShoppingCartIcon className="w-4 h-4 mr-2" />                Add to Cart              </Button>            </div>          </div>        </HoverCardContent>      </HoverCard>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Link previews

So you know what you're about to click:

Loading component...

"use client"import { ExternalLinkIcon, GithubIcon } from "lucide-react"import {  HoverCard,  HoverCardContent,  HoverCardTrigger,} from "@/components/ui/hover-card"export default function HoverCardLinkPreview() {  return (    <div className="max-w-md">      <p className="text-sm leading-relaxed">        This project is built with modern tools like{" "}        <HoverCard>          <HoverCardTrigger asChild>            <a               href="#"               className="text-blue-600 hover:text-blue-800 underline cursor-pointer"            >              React            </a>          </HoverCardTrigger>          <HoverCardContent className="w-80">            <div className="space-y-3">              <div className="flex items-center gap-3">                <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">                  <span className="text-white font-bold text-sm">R</span>                </div>                <div>                  <h4 className="font-semibold">React</h4>                  <p className="text-xs text-muted-foreground">react.dev</p>                </div>              </div>              <p className="text-sm text-muted-foreground">                A JavaScript library for building user interfaces. React makes it                painless to create interactive UIs with a component-based architecture.              </p>              <div className="flex items-center justify-between text-xs text-muted-foreground">                <div className="flex items-center gap-2">                  <GithubIcon className="w-4 h-4" />                  <span>facebook/react</span>                </div>                <div className="flex items-center gap-1">                  <ExternalLinkIcon className="w-3 h-3" />                  <span>Visit site</span>                </div>              </div>            </div>          </HoverCardContent>        </HoverCard>        {" "}and{" "}        <HoverCard>          <HoverCardTrigger asChild>            <a               href="#"               className="text-blue-600 hover:text-blue-800 underline cursor-pointer"            >              TypeScript            </a>          </HoverCardTrigger>          <HoverCardContent className="w-80">            <div className="space-y-3">              <div className="flex items-center gap-3">                <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">                  <span className="text-white font-bold text-sm">TS</span>                </div>                <div>                  <h4 className="font-semibold">TypeScript</h4>                  <p className="text-xs text-muted-foreground">typescriptlang.org</p>                </div>              </div>              <p className="text-sm text-muted-foreground">                TypeScript is JavaScript with syntax for types. It's a strongly typed                 programming language that builds on JavaScript.              </p>              <div className="flex items-center justify-between text-xs text-muted-foreground">                <div className="flex items-center gap-2">                  <GithubIcon className="w-4 h-4" />                  <span>microsoft/TypeScript</span>                </div>                <div className="flex items-center gap-1">                  <ExternalLinkIcon className="w-3 h-3" />                  <span>Visit site</span>                </div>              </div>            </div>          </HoverCardContent>        </HoverCard>        {" "}for a robust development experience.      </p>    </div>  )}

Status and metrics

Server status, performance metrics, that stuff:

Loading component...

"use client"import { InfoIcon, TrendingUpIcon, UsersIcon } from "lucide-react"import {  HoverCard,  HoverCardContent,  HoverCardTrigger,} from "@/components/ui/hover-card"export default function HoverCardInfo() {  return (    <div className="space-y-4">      <div className="flex items-center gap-2">        <span className="text-sm">Server Status:</span>        <HoverCard>          <HoverCardTrigger asChild>            <button className="flex items-center gap-1 text-green-600 hover:text-green-700">              <div className="w-2 h-2 bg-green-500 rounded-full"></div>              <span className="text-sm font-medium">Operational</span>              <InfoIcon className="w-4 h-4" />            </button>          </HoverCardTrigger>          <HoverCardContent className="w-64">            <div className="space-y-3">              <h4 className="font-semibold text-green-600">All Systems Operational</h4>              <div className="space-y-2 text-sm">                <div className="flex items-center justify-between">                  <span className="text-muted-foreground">API Response Time</span>                  <span className="font-medium">142ms</span>                </div>                <div className="flex items-center justify-between">                  <span className="text-muted-foreground">Uptime (30 days)</span>                  <span className="font-medium">99.98%</span>                </div>                <div className="flex items-center justify-between">                  <span className="text-muted-foreground">Active Users</span>                  <span className="font-medium">2,847</span>                </div>              </div>              <div className="pt-2 border-t text-xs text-muted-foreground">                Last updated: 2 minutes ago              </div>            </div>          </HoverCardContent>        </HoverCard>      </div>      <div className="flex items-center gap-2">        <span className="text-sm">Performance:</span>        <HoverCard>          <HoverCardTrigger asChild>            <button className="flex items-center gap-1 text-blue-600 hover:text-blue-700">              <TrendingUpIcon className="w-4 h-4" />              <span className="text-sm font-medium">Excellent</span>            </button>          </HoverCardTrigger>          <HoverCardContent className="w-80">            <div className="space-y-3">              <h4 className="font-semibold">Performance Metrics</h4>              <div className="grid grid-cols-2 gap-4 text-sm">                <div className="space-y-1">                  <div className="text-muted-foreground">Load Time</div>                  <div className="font-medium">1.2s</div>                </div>                <div className="space-y-1">                  <div className="text-muted-foreground">First Paint</div>                  <div className="font-medium">0.8s</div>                </div>                <div className="space-y-1">                  <div className="text-muted-foreground">Largest Paint</div>                  <div className="font-medium">1.1s</div>                </div>                <div className="space-y-1">                  <div className="text-muted-foreground">Interaction</div>                  <div className="font-medium">0.1s</div>                </div>              </div>              <div className="pt-2 border-t">                <div className="flex items-center gap-2 text-xs text-muted-foreground">                  <UsersIcon className="w-3 h-3" />                  <span>Based on 1,000+ user sessions</span>                </div>              </div>            </div>          </HoverCardContent>        </HoverCard>      </div>    </div>  )}

API Reference

Root component that manages hover card state and positioning.

Prop	Type	Default	Description
`open`	`boolean`	-	Whether the hover card is open
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`defaultOpen`	`boolean`	`false`	Default open state (uncontrolled)
`openDelay`	`number`	`700`	Delay before opening (milliseconds)
`closeDelay`	`number`	`300`	Delay before closing (milliseconds)
`children`	`React.ReactNode`	-	HoverCardTrigger and HoverCardContent

HoverCardTrigger

Element that triggers the hover card when hovered or focused.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element instead of button
`children`	`React.ReactNode`	-	Trigger content

HoverCardContent

The popup content that appears on hover or focus.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to trigger
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred side to open
`sideOffset`	`number`	`4`	Distance from trigger element
`alignOffset`	`number`	`0`	Offset from align position
`avoidCollisions`	`boolean`	`true`	Prevent collisions with viewport edges
`collisionBoundary`	`Element \| Element[]`	`[]`	Boundary elements for collision detection
`sticky`	`"partial" \| "always"`	`"partial"`	Sticky positioning behavior
`children`	`React.ReactNode`	-	Card content

Timing Configuration

Delay Type	Default	Description	Best Practice
`openDelay`	`700ms`	Time before showing card	500-1000ms for comfortable UX
`closeDelay`	`300ms`	Time before hiding card	200-500ms to prevent flicker

Positioning Options

Side	Description	Use Cases
`top`	Opens above trigger	Bottom navigation, footers
`bottom`	Opens below trigger	Default, most menu items
`left`	Opens to the left	Right-aligned content
`right`	Opens to the right	Left-aligned content, sidebars

Alignment Options

Align	Description	Visual Result
`start`	Aligns to start edge	Left-aligned for horizontal, top for vertical
`center`	Centers on trigger	Balanced positioning
`end`	Aligns to end edge	Right-aligned for horizontal, bottom for vertical

Interaction States

State	Trigger	Duration
Idle	No interaction	-
Pending Open	Hover/focus starts	`openDelay` duration
Open	Card visible	Until leave/blur + `closeDelay`
Pending Close	Leave/blur starts	`closeDelay` duration
Closed	Card hidden	-

Accessibility Features

Feature	Implementation
Keyboard Support	Opens on focus, closes on blur/escape
ARIA Attributes	Proper labeling and describedby relationships
Focus Management	Maintains focus trap when needed
Screen Readers	Announces content changes appropriately
High Contrast	Respects system color preferences
Reduced Motion	Honors user motion preferences

Common patterns that work

User profiles - Perfect for @mentions, author credits, or team member lists. Show avatar, bio, join date, and social stats without leaving the page.

Product previews - Let users peek at items before clicking through. Include images, ratings, prices, and quick action buttons.

Link previews - Give context for external links. Show site info, descriptions, and trust indicators so users know what they're clicking.

Status displays - Surface system health, performance metrics, or feature availability with rich context on hover.

Make hover cards that actually help

The best hover cards feel invisible until you need them. Here's how to nail that:

Show stuff people care about - Profile cards with follower counts, not just names
Time it right - Too fast feels jumpy, too slow feels broken (700ms is usually perfect)
Size for content - Big enough to be useful, small enough to not dominate the screen
Make it scannable - Good typography hierarchy so people find what they need fast
Add useful actions - Follow buttons, add to cart, copy links - stuff people actually want to do
Don't break on mobile - Touch devices are tricky, have a backup plan
Keep it snappy - Nobody wants to wait 3 seconds for a profile picture to load
Stay predictable - If cards pop up from different directions, it's confusing
Easy escape - Click outside, hit escape, whatever - make it obvious how to close them

Rich profile preview

Why hover cards just work

Essential hover card patterns you'll use

Simple content preview

Detailed user profile

Product previews

Link previews

Status and metrics

API Reference

HoverCard

HoverCardTrigger

HoverCardContent

Timing Configuration

Positioning Options

Alignment Options

Interaction States

Accessibility Features

Common patterns that work

Make hover cards that actually help

On this page

Hover Card

Reactavatar

Reactbutton

Reacthover-card

Reacthover-card

Reactavatar

Reactbutton

Reacthover-card

Reactbutton

Reacthover-card

Reacthover-card

Reacthover-card

On this page