V-/Srcv0.1.0beta

// hover-card

Hover Card

A glass preview that opens on hover or focus.

@vsrc
// install
npx shadcn add @vsrc/hover-card

Props

Only the vsrc surface is documented here. Everything else passes through to Radix Hover Card.

// HoverCardContent

proptypedefaultnotes
glass"subtle" | "regular" | "heavy" | LiquidGlassOptions | false—Optics override for the preview panel. A preset name replaces the tuned values, an object merges over them, `false` disables refraction entirely.

Optics

Forwards `glass` to GlassSurface — engine defaults; the docs demo passes `glass="subtle"` to show preset swapping on a real surface.

Accessibility

  • Opens on keyboard focus, not just pointer hover.
  • Content is supplementary by design — never put required actions in a hover card.

Source

The exact file the CLI copies into your project — you own it after install.

// registry/vsrc/ui/hover-card.tsx
"use client";

import * as React from "react";
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
import type { GlassPreset, LiquidGlassOptions } from "vsrc/react";

import { GlassSurface } from "@/registry/vsrc/ui/glass-surface";
import { cn } from "@/lib/utils";

const HoverCard = HoverCardPrimitive.Root;
const HoverCardTrigger = HoverCardPrimitive.Trigger;

function HoverCardContent({
  className,
  align = "center",
  sideOffset = 8,
  glass,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content> & { glass?: LiquidGlassOptions | GlassPreset | false }) {
  return (
    <HoverCardPrimitive.Portal>
      <GlassSurface asChild glass={glass}>
        <HoverCardPrimitive.Content
          data-slot="hover-card-content"
          align={align}
          sideOffset={sideOffset}
          className={cn("animate-glass-in relative z-50 w-72 p-4 text-foreground outline-none", className)}
          {...props}
        />
      </GlassSurface>
    </HoverCardPrimitive.Portal>
  );
}

export { HoverCard, HoverCardTrigger, HoverCardContent };