Hover Card

Hover Card previews the content behind a link when the user hovers over it.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/hover-card.tsx
Import from@viliha/vui-react/hover-card

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

Preview content on hover: best for supplementary, non-essential info.

hover-card-demo.tsx
import {
  HoverCard, HoverCardTrigger, HoverCardContent,
} from "@viliha/vui-react/hover-card";

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@viliha</Button>
      </HoverCardTrigger>
      <HoverCardContent>
        The open-source admin design system.
      </HoverCardContent>
    </HoverCard>
  );
}

HoverCard props

It takes no props of its own. Everything you pass reaches the underlying HoverCardPrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

HoverCardContent props

It takes no props of its own. Everything you pass reaches the underlying HoverCardPrimitive.Content primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

HoverCardTrigger props

It takes no props of its own. Everything you pass reaches the underlying HoverCardPrimitive.Trigger primitive, so every attribute it accepts works here unchanged and nothing is invented on top.