Hover Card

Preview

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@/components/ui/HoverCard";
import { Button } from "@/components/ui/Button";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/Avatar";
import { CalendarIcon } from "@radix-ui/react-icons";

export function HoverCardDemo() {
  return (
  <HoverCard>
    <HoverCardTrigger asChild>
      <Button variant="link">Hover me</Button>
    </HoverCardTrigger>
    <HoverCardContent>
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">Hover Card</h4>
        <p className="text-sm text-gray-11">
          This is a simple hover card example.
        </p>
      </div>
    </HoverCardContent>
  </HoverCard>
);
}

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

pnpm dlx shadcn@latest add @aura/hover-card

Usage

ProfilePreview

export const ProfilePreview = () => (
  <HoverCard>
    <HoverCardTrigger asChild>
      <Button variant="link">Hover me</Button>
    </HoverCardTrigger>
    <HoverCardContent className="w-20">
      <div className="flex justify-between space-x-0.5 items-start">
        <div>
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
        </div>
        <div className="space-y-0.5">
          <h4 className="text-sm font-semibold">shadcn</h4>
          <p className="text-sm">
            Designed and built with all the love in the world by @shadcn.
          </p>
          <div className="flex items-center pt-1">
            <CalendarIcon className="mr-2 icon" />{" "}
            <span className="text-xs text-gray-11">Joined December 2021</span>
          </div>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>
);

Props

Prop	Type	Default
All props from	`HoverCardRadix.Root`	-

HoverCardTrigger

Prop	Type	Default
All props from	`HoverCardRadix.Trigger`	-

HoverCardContent

Prop	Type	Default
All props from	`HoverCardRadix.Content`	-

On this page