Hovercard

Installation

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

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

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
        asChild
        delay={200}
        closeDelay={100}
      >
        <Button variant="link">Frontfriend</Button>
      </HoverCardTrigger>
      <HoverCardContent side="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 asChild delay={100} closeDelay={100}>
      <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 asChild delay={100} closeDelay={100}>
        <Button variant="tertiary" className="capitalize">
          {side}
        </Button>
      </HoverCardTrigger>
      <HoverCardContent side={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 asChild delay={100} closeDelay={100}>
        <Button variant="tertiary" className="capitalize">
          {align}
        </Button>
      </HoverCardTrigger>
      <HoverCardContent align={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 Base UI.

This component adds no props of its own to Base UI.

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