Hover Card
For sighted users to preview content available behind a link.
Loading…
import { Button } from "@/components/ui/button";import { HoverCard, HoverCardContent, HoverCardTrigger,} from "@/components/ui/hover-card";export default function HoverCardDemo() { return ( <HoverCard openDelay={100} closeDelay={100}> <HoverCardTrigger asChild> <Button variant="link">@cortexcn</Button> </HoverCardTrigger> <HoverCardContent className="flex w-64 flex-col gap-0.5"> <div className="font-semibold">@cortexcn</div> <div className="text-sm"> Components you own — copy the source into your project. </div> <div className="mt-1 text-xs text-muted-foreground"> Joined June 2026 </div> </HoverCardContent> </HoverCard> );}Installation
npx shadcn@latest add @cortexcn/hover-cardInstall the following dependencies:
npm install radix-uiCopy and paste the following code into your project.
"use client";import * as React from "react";import { HoverCard as HoverCardPrimitive } from "radix-ui";import { cn } from "@/lib/utils";function HoverCard({ ...props}: React.ComponentProps<typeof HoverCardPrimitive.Root>) { return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;}function HoverCardTrigger({ ...props}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) { return ( <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} /> );}function HoverCardContent({ className, align = "center", sideOffset = 4, ...props}: React.ComponentProps<typeof HoverCardPrimitive.Content>) { return ( <HoverCardPrimitive.Portal data-slot="hover-card-portal"> <HoverCardPrimitive.Content data-slot="hover-card-content" align={align} sideOffset={sideOffset} className={cn( "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className, )} {...props} /> </HoverCardPrimitive.Portal> );}export { HoverCard, HoverCardTrigger, HoverCardContent };Update the import paths to match your project setup.
Usage
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card";<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>
The React Framework – created and maintained by @vercel.
</HoverCardContent>
</HoverCard>Composition
Use the following composition to build a HoverCard:
HoverCard
├── HoverCardTrigger
└── HoverCardContentTrigger delays
Use openDelay and closeDelay on the HoverCard to control when the card
opens and closes.
<HoverCard openDelay={100} closeDelay={200}>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>Content</HoverCardContent>
</HoverCard>Positioning
Use the side and align props on HoverCardContent to control placement.
<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent side="top" align="start">
Content
</HoverCardContent>
</HoverCard>Examples
Basic
A link trigger that reveals a small preview card on hover.
Loading…
import { Button } from "@/components/ui/button";import { HoverCard, HoverCardContent, HoverCardTrigger,} from "@/components/ui/hover-card";export default function HoverCardDemo() { return ( <HoverCard openDelay={100} closeDelay={100}> <HoverCardTrigger asChild> <Button variant="link">@cortexcn</Button> </HoverCardTrigger> <HoverCardContent className="flex w-64 flex-col gap-0.5"> <div className="font-semibold">@cortexcn</div> <div className="text-sm"> Components you own — copy the source into your project. </div> <div className="mt-1 text-xs text-muted-foreground"> Joined June 2026 </div> </HoverCardContent> </HoverCard> );}Sides
Use the side prop on HoverCardContent to place the card on the top,
right, bottom, or left of the trigger.
Loading…
import { Button } from "@/components/ui/button";import { HoverCard, HoverCardContent, HoverCardTrigger,} from "@/components/ui/hover-card";const HOVER_CARD_SIDES = ["left", "top", "bottom", "right"] as const;export default function HoverCardSides() { return ( <div className="flex flex-wrap justify-center gap-2"> {HOVER_CARD_SIDES.map((side) => ( <HoverCard key={side} openDelay={100} closeDelay={100}> <HoverCardTrigger asChild> <Button variant="outline" className="capitalize"> {side} </Button> </HoverCardTrigger> <HoverCardContent side={side}> <div className="flex flex-col gap-1"> <h4 className="font-medium">Hover Card</h4> <p className="text-sm text-muted-foreground"> This hover card appears on the {side} side of the trigger. </p> </div> </HoverCardContent> </HoverCard> ))} </div> );}Trigger delays
Tune openDelay and closeDelay on HoverCard to control how quickly the card
appears and dismisses.
Loading…
import { Button } from "@/components/ui/button";import { HoverCard, HoverCardContent, HoverCardTrigger,} from "@/components/ui/hover-card";export default function HoverCardDelays() { return ( <div className="flex flex-wrap items-center justify-center gap-2"> <HoverCard openDelay={0} closeDelay={0}> <HoverCardTrigger asChild> <Button variant="outline">Instant</Button> </HoverCardTrigger> <HoverCardContent>Opens immediately on hover.</HoverCardContent> </HoverCard> <HoverCard openDelay={500} closeDelay={200}> <HoverCardTrigger asChild> <Button variant="outline">Delayed</Button> </HoverCardTrigger> <HoverCardContent>Waits 500ms before opening.</HoverCardContent> </HoverCard> </div> );}API Reference
See the Radix UI documentation for more information.