Hovercard

Installation

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

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

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}
      openDelay={200}
      closeDelay={100}
    >
      <HoverCardTrigger asChild>
        <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>
      <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} openDelay={100} closeDelay={100}>
      <HoverCardTrigger asChild>
        <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} openDelay={100} closeDelay={100}>
      <HoverCardTrigger asChild>
        <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 Radix UI.

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

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