Primitives

Hover card

Hover or focus preview panel for profiles, links, and contextual details.

Shipped by @ada and the platform team.

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

HoverCard

├── HoverCardTrigger

└── HoverCardContent

The refined source installs this primitive from src/registry/sources/refined/ui/hover-card.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/hover-card.json

See registry manifest

Installed dependencies

Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.

Surface variantssrc/registry/sources/refined/surface-variants.tsSupport

Raw code

Primary installed primitive source

Base UI Preview card slot

src/registry/sources/refined/ui/hover-card.tsx

"use client";

import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";

import type { ComponentProps } from "react";

import type { HoverCardContentProps, HoverCardProps } from "@/components/refined-ui/contracts";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinEffects, skinId, skinSlot } from "@/components/refined-ui/skin";

import { floatingContentClasses } from "@/components/refined-ui/surface-variants";

// Refined skin slot, 100% Base UI PreviewCard: hover/focus-triggered floating card.

// Shares popover token set (--radius-popover, --popover-padding, shadow-pop) w/ menu/select/popover; re-asserts skin scope on portal.

// shadcn-shaped facade (Root/Trigger/Content) so shadcn HoverCard snippets compose verbatim.

export function HoverCard(props: HoverCardProps) {

return <PreviewCardPrimitive.Root {...props} />;

}

export function HoverCardTrigger({ className, ...props }: ComponentProps<typeof PreviewCardPrimitive.Trigger>) {

return (

<PreviewCardPrimitive.Trigger

data-ui="agent"

data-slot="hover-card-trigger"

className={cn(skinSlot("hover-card-trigger", {}), className)}

{...props}

/>

);

}

export function HoverCardContent({

className,

children,

side = "bottom",

align = "center",

sideOffset = 8,

...props

}: HoverCardContentProps) {

return (

<PreviewCardPrimitive.Portal>

{/* Portal escapes token-scoped ancestor — positioner re-asserts ACTIVE skin's scope (theme.css mirrors). */}

<PreviewCardPrimitive.Positioner

data-skin={skinId()}

data-effects={skinEffects()}

side={side}

align={align}

sideOffset={sideOffset}

className="z-[80] outline-none"

>

<PreviewCardPrimitive.Popup

data-ui="agent"

data-slot="hover-card-content"

          className={cn("w-64 p-[var(--popover-padding)]", floatingContentClasses, skinSlot("hover-card-content", {}), className)}

{...props}

>

{children}

</PreviewCardPrimitive.Popup>

</PreviewCardPrimitive.Positioner>

</PreviewCardPrimitive.Portal>