Hovercard

Installation

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

pnpm exec frontfriend download hover-card -f react --primitive aria

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

Usage

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@/components/ui/hover-card";
import { Button } from "@/components/ui/button";
import * as React from "react";
export default function HoverCardExample() {
  const [open, setOpen] = React.useState(false);
  return (
    <HoverCard open={open} onOpenChange={setOpen}>
      <HoverCardTrigger>
        <Button variant="link">Frontfriend</Button>
      </HoverCardTrigger>
      <HoverCardContent placement="bottom">
        <p>Build your Design System.</p>
      </HoverCardContent>
    </HoverCard>
  );
}

Examples

Default

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@/components/ui/hover-card";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
<div className="py-16">
  <HoverCard>
    <HoverCardTrigger>
      <Button variant="link">@nextjs</Button>
    </HoverCardTrigger>
    <HoverCardContent className="w-80">
      <div className="flex justify-between space-x-4">
        <Avatar>
          <AvatarImage src="https://github.com/vercel.png" />
          <AvatarFallback>VC</AvatarFallback>
        </Avatar>
        <div className="space-y-1">
          <h4 className="text-sm font-semibold">@nextjs</h4>
          <p className="text-sm">
            The React Framework – created and maintained by @vercel.
          </p>
          <div className="text-xs text-neutral-mid">Joined December 2021</div>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>
</div>;

Sides

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@/components/ui/hover-card";
import { Button } from "@/components/ui/button";
<div className="flex flex-wrap items-center justify-center gap-4 p-24">
  {(["top", "right", "bottom", "left"] as const).map((side) => (
    <HoverCard key={side}>
      <HoverCardTrigger>
        <Button variant="tertiary" className="capitalize">
          {side}
        </Button>
      </HoverCardTrigger>
      <HoverCardContent placement={side} className="w-64">
        <div className="flex flex-col gap-1.5">
          <h4 className="text-sm font-semibold">Hover Card</h4>
          <p className="text-sm">
            This hover card appears on the {side} side of the trigger.
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  ))}
</div>;

Right To Left

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@/components/ui/hover-card";
import { Button } from "@/components/ui/button";
<div
  dir="rtl"
  className="flex flex-wrap items-center justify-center gap-4 p-24"
>
  {(["start", "end"] as const).map((align) => (
    <HoverCard key={align}>
      <HoverCardTrigger>
        <Button variant="tertiary" className="capitalize">
          {align}
        </Button>
      </HoverCardTrigger>
      <HoverCardContent placement={`bottom ${align}`} className="w-64">
        <div className="flex flex-col gap-1.5">
          <h4 className="text-sm font-semibold">כרטיס מידע</h4>
          <p className="text-sm">
            Aligned to the {align} edge, mirrored for right-to-left.
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  ))}
</div>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

This component adds no props of its own to React Aria.

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