skills/docs/ui/react/react-ui/src/components/hover-card/hover-card.variants.md

HoverCard Variants (cva config)

Purpose

hoverCardContentVariants is the cva configuration powering the <HoverCardContent> floating panel. It is split from hover-card.tsx into its own module so an ejected source copy under npx shadcn@latest add @suaveplan/hover-card keeps the cva configuration in a dedicated file. Theme overrides flow through useThemedVariants("HoverCardContent").

The cva carries the visual recipe (rounded border, popover-foreground colours, shadow, fixed w-64 width — narrower than <PopoverContent> because hover cards typically hold richer content but live shorter on screen) plus the same animation recipe as Popover.

Features

• Fixed w-64 width (slightly narrower than Popover's w-72).
• data-state open/close fade + zoom animations.
• data-side slide-in direction matching the resolved positioning.
• bg-popover text-popover-foreground so the panel reads against any surface.
• motion-reduce:animate-none collapses animations under reduced-motion preference.

Usage: Basic Example

import { hoverCardContentVariants } from "@suaveplan/react-ui";

const className = hoverCardContentVariants();

Usage: Advanced Example

import { hoverCardContentVariants, cn } from "@suaveplan/react-ui";

export function CustomHoverCardShell() {
    return (
        <div
            data-state="open"
            data-side="top"
            className={cn(hoverCardContentVariants(), "w-80 p-6")}
        >
            …
        </div>
    );
}

API Reference

hoverCardContentVariants(): string

Returns the hover-card content classes; takes no arguments — the hover card is not parameterised by an axis.

Implementation Notes

• Per the shadcn skill rule, the cva NEVER assigns a numeric z-index. Radix's <Portal> mounts the content above all page content via DOM placement.
• Width is fixed at w-64 to match the shadcn upstream recipe — consumers who need a wider panel layer their own width override via cn(...) at the call site.