Vui Starter
npm

Hover Card

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

API Reference

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/hover-card.

Usage

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

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

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