Hovercard

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download hover-card -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { HoverCard } from "@/components/ui/hover-card";
import { HoverCardTrigger } from "@/components/ui/hover-card";
import { Button } from "@/components/ui/button";
import { HoverCardContent } from "@/components/ui/hover-card";
import { reactive } from "vue";
import * as UI from "@/components/ui/hover-card";

const Component = UI.HoverCard;

const args = reactive(
  {
    "open": false,
    "openDelay": 200,
    "closeDelay": 100,
    "side": "bottom",
  } satisfies Partial<
    InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown> & { side?: "top" | "right" | "bottom" | "left" },
);
</script>

<template>
  <HoverCard
    v-model:open="args.open"
    :open-delay="args.openDelay"
    :close-delay="args.closeDelay"
    ><HoverCardTrigger as-child
      ><Button variant="link">Frontfriend</Button></HoverCardTrigger
    ><HoverCardContent :side="args.side"
      >Build your Design System.</HoverCardContent
    ></HoverCard
  >
</template>

openDelay / closeDelay live on the root, while side, align and sideOffset position the content — the stories below exercise each, since the configured data-[side=*] slide-in classes only render once a side is actually chosen.

Subcomponents

• HoverCard
• HoverCardContent
• HoverCardTrigger

Examples

Default

<script setup lang="ts">
import { HoverCard } from "@/components/ui/hover-card";
import { HoverCardTrigger } from "@/components/ui/hover-card";
import { Button } from "@/components/ui/button";
import { HoverCardContent } from "@/components/ui/hover-card";
import { Avatar } from "@/components/ui/avatar";
import { AvatarImage } from "@/components/ui/avatar";
import { AvatarFallback } from "@/components/ui/avatar";
import * as UI from "@/components/ui/hover-card";

const Component = UI.HoverCard;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="py-16">
    <HoverCard v-bind="args">
      <HoverCardTrigger as-child>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent class="w-80">
        <div class="flex justify-between space-x-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div class="space-y-1">
            <h4 class="text-sm font-semibold">@nextjs</h4>
            <p class="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div class="text-xs text-neutral-mid">Joined December 2021</div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  </div>
</template>

Sides

<script setup lang="ts">
import { HoverCard } from "@/components/ui/hover-card";
import { HoverCardTrigger } from "@/components/ui/hover-card";
import { Button } from "@/components/ui/button";
import { HoverCardContent } from "@/components/ui/hover-card";
import * as UI from "@/components/ui/hover-card";

const Component = UI.HoverCard;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const sides = ["top", "right", "bottom", "left"] as const;
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4 p-24">
    <HoverCard
      v-for="side in sides"
      :key="side"
      :open-delay="100"
      :close-delay="100"
    >
      <HoverCardTrigger as-child>
        <Button variant="outline" class="capitalize">{{ side }}</Button>
      </HoverCardTrigger>
      <HoverCardContent :side="side" class="w-64">
        <div class="flex flex-col gap-1.5">
          <h4 class="text-sm font-semibold">Hover Card</h4>
          <p class="text-sm">
            This hover card appears on the {{ side }} side of the trigger.
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  </div>
</template>

Right To Left

<script setup lang="ts">
import { HoverCard } from "@/components/ui/hover-card";
import { HoverCardTrigger } from "@/components/ui/hover-card";
import { Button } from "@/components/ui/button";
import { HoverCardContent } from "@/components/ui/hover-card";
import * as UI from "@/components/ui/hover-card";

const Component = UI.HoverCard;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div dir="rtl">
    <HoverCard
      ><HoverCardTrigger as-child><Button>Profile</Button></HoverCardTrigger
      ><HoverCardContent align="start"
        >Profile details</HoverCardContent
      ></HoverCard
    >
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.