shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/base/hover-card.jsonnpx shadcn@latest add https://kit.dev/r/base/hover-card.jsonpnpm dlx shadcn@latest add https://kit.dev/r/base/hover-card.jsonyarn shadcn@latest add https://kit.dev/r/base/hover-card.jsonThis component depends on Button. Install it first if you haven't already.
Install the following dependencies:
bun add @base-ui/reactnpm install @base-ui/reactpnpm add @base-ui/reactyarn add @base-ui/reactCopy and paste the following code into your project.
"use client";
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
import { cn } from "@/lib/utils";
export const HoverCard = (props: PreviewCardPrimitive.Root.Props) => (
<PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
);
export const HoverCardTrigger = (props: PreviewCardPrimitive.Trigger.Props) => (
<PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
);
export const HoverCardContent = (
props: PreviewCardPrimitive.Popup.Props &
Pick<
PreviewCardPrimitive.Positioner.Props,
"align" | "alignOffset" | "side" | "sideOffset"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
HoverCardTrigger
a
PropType
AttributeType
HoverCardContent
div
PropType
AttributeType
CSS variableType
--transform-originstring