Shadcn Hover Card

React hover card component for contextual popups and user profile previews. Built with TypeScript and Tailwind CSS for Next.js applications using Radix UI.

Hover card flickering?

Join our Discord community for help from other developers.

Ever built a dashboard where users had to click through multiple links just to see basic info about a user or product? Or watched someone open ten new tabs because they were afraid clicking would lose their place? Yeah, that's exactly why hover cards exist. This shadcn/ui hover card brings contextual previews to your React applications.

Rich information previews without losing context:

Loading component...

Built on Radix UI primitives with smart positioning and full keyboard navigation. Styled with Tailwind CSS so it matches your design system instead of looking like a generic browser tooltip.

npx shadcn@latest add hover-card

Why hover cards actually improve user experience

Here's the thing—users hate losing their context. When someone's reading a article and sees an author byline, they want to know who wrote it. But clicking through to a profile page breaks their flow. They bookmark it for later, forget about it, or just skip it entirely.

Think about how LinkedIn shows mini-profiles when you hover over names, or how GitHub previews pull request details on hover. You get the information you need without interrupting your workflow. That's the power of contextual information.

This free shadcn hover card handles the complex parts—timing delays, smart positioning, keyboard accessibility, focus management—while you focus on showing the right information at the right moment. Whether you're building admin panels, social platforms, or content sites in your Next.js applications, hover cards that provide instant context keep users engaged in your JavaScript projects.

User profile preview

Show author info, follower counts, and bio:

Loading component...

Quick content preview

Preview links and articles before clicking:

Loading component...

Product information

Show pricing, ratings, and key details:

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 }

Status indicators

Display system health and performance metrics:

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>  )}

Team member cards

Show contact info and role details:

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>  )}

Features

This free open source hover card component includes everything you need:

TypeScript-first - Full type safety with hover events and state management
Radix UI powered - Battle-tested accessibility and positioning logic
Smart timing - Configurable delays prevent accidental triggers
Tailwind CSS styled - Customize with utilities, not fighting component CSS
Keyboard accessible - Focus management and Escape key support
Mobile responsive - Adapts to touch devices with appropriate fallbacks
Collision detection - Automatically repositions to stay within viewport
Portal rendering - Renders in document body to avoid z-index issues

API Reference

Core Components

Component	Purpose	Key Props
`HoverCard`	Root container	`open`, `onOpenChange`, `openDelay`, `closeDelay`
`HoverCardTrigger`	Element that triggers	`asChild` for custom elements
`HoverCardContent`	Popup content	`side`, `align`, `sideOffset`

Timing and Positioning

Setting	Default	Purpose
`openDelay`	700ms	Prevent accidental triggers
`closeDelay`	300ms	Allow mouse travel to content
`side`	bottom	Preferred popup direction
`align`	center	Alignment relative to trigger

Interaction States

State	Trigger	Behavior
Hover	Mouse enter trigger	Shows after openDelay
Focus	Keyboard focus	Shows immediately
Leave	Mouse/focus leave	Hides after closeDelay
Escape	Escape key	Hides immediately

Production tips

Time delays appropriately. This free shadcn/ui hover card defaults to 700ms open delay—that's perfect for most cases. Too fast feels jumpy, too slow feels broken. This TypeScript component lets you adjust timing, but test with real users before changing the defaults in your Next.js applications.

Design for mobile carefully. Hover doesn't exist on touch devices. Consider showing the same information in a different way—maybe a tap gesture or a details section. This open source shadcn component handles the detection, but you need to design the fallback experience.

Keep content scannable. Users scan hover cards quickly. Use clear headings, bullet points, and visual hierarchy. This JavaScript component provides the container—you provide content that helps users make decisions fast in your React applications.

Don't overwhelm with actions. One or two action buttons maximum. Follow buttons, copy links, view profiles—focus on what users actually want to do. The Tailwind CSS styled component supports any content, but restraint creates better user experiences.

Position predictably. Cards that pop up from random directions feel chaotic. Pick a default position and stick with it. This component handles collision detection—you provide consistent expectations.

Integration with other components

Hover cards naturally work with Avatar components for user profile previews in your React applications. Use Button components inside cards for actions like following or viewing full profiles.

For content previews, combine hover cards with Badge components to show status indicators or Card components for structured layouts. This open source pattern keeps your hover content consistent with your main interface.

When building navigation systems, pair hover cards with NavigationMenu components for rich menu previews. Separator components help organize complex hover card content into logical sections.

For loading states, use hover cards with Skeleton components while fetching user data or profile information. Your JavaScript application can show immediate feedback while loading the full content.

Shadcn Hover Card

Hover card showcase

Why hover cards actually improve user experience

Common hover card patterns you'll actually use

User profile preview

Quick content preview

Product information

Status indicators

Team member cards

Features

API Reference

Core Components

Timing and Positioning

Interaction States

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Hover Card

Reactavatar

Reactbutton

Reacthover-card

Reactavatar

Reactbutton

Reacthover-card

Reacthover-card

Reactbutton

Reacthover-card

Reacthover-card

Reactavatar

Reactbutton

Reacthover-card

When should I use Hover Card vs Tooltip?

How do hover cards work on mobile devices?

Can I customize the hover timing?

How does automatic positioning work?

Are hover cards accessible with keyboard navigation?

Do hover cards impact page performance?

Can I nest hover cards inside each other?

Can I use custom elements as triggers?

On this page