shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/hover-card.jsonnpx shadcn@latest add https://kit.dev/r/aria/hover-card.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/hover-card.jsonyarn shadcn@latest add https://kit.dev/r/aria/hover-card.jsonThis component depends on Button. Install it first if you haven't already.
Install the following dependencies:
bun add react-aria-componentsnpm install react-aria-componentspnpm add react-aria-componentsyarn add react-aria-componentsCopy and paste the following code into your project.
"use client";
import {
Popover as PopoverPrimitive,
type PopoverProps as PopoverPrimitiveProps,
PreviewTrigger as PreviewTriggerPrimitive,
type PreviewTriggerProps,
} from "react-aria-components";
import { cn } from "@/lib/utils";
export const HoverCardTrigger = (props: PreviewTriggerProps) => {
const { children, ...rest } = props;
return (
<PreviewTriggerPrimitive data-slot="hover-card-trigger" {...rest}>
{children}
</PreviewTriggerPrimitive>
);Update the import paths to match your project setup.
Anatomy
HoverCardArrow
└── HoverCardArrowTip
HoverCardTrigger
HoverCardContent
└── HoverCardPositionerUsage
import { Button } from "@/components/ui/button";
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card";<HoverCard>
<HoverCardTrigger asChild>
<Button variant="link">Hover Here</Button>
</HoverCardTrigger>
<HoverCardContent className="flex w-64 flex-col gap-0.5">
<div className="font-semibold">@nextjs</div>
<div>The React Framework – created and maintained by @vercel.</div>
<div className="mt-1 text-muted-foreground text-xs">
Joined December 2021
</div>
</HoverCardContent>
</HoverCard>Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused item. |
Space | Activate the focused control. |
Demos
Sides
Position the hover card with Ark positioning.placement.
Rtl
Right-to-left hover card. See the RTL configuration guide for document direction.
API Reference
HoverCard
PropType
AttributeType
CSS variableType
--trigger-anchor-pointstringHoverCardTrigger
PropType
AttributeType