Hover Card
For sighted users to preview content available behind a link.
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 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>
)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-cardManual
Install the following dependencies:
pnpm install radix-uiCopy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the HoverCard component into your components/ui/HoverCard.tsx file.
"use client";
/**
* @description For sighted users to preview content available behind a link.
*/
import * as React from "react";
import { HoverCard as HoverCardRadix } from "radix-ui";
import { cn } from "@/utils/class-names";
function HoverCard({
...props
}: React.ComponentProps<typeof HoverCardRadix.Root>) {
return <HoverCardRadix.Root data-slot="hover-card" {...props} />;
}
function HoverCardTrigger({
className,
...props
}: React.ComponentProps<typeof HoverCardRadix.Trigger>) {
return (
<HoverCardRadix.Trigger
data-slot="hover-card-trigger"
className={cn(className)}
{...props}
/>
);
}
function HoverCardContent({
className,
children,
...props
}: React.ComponentProps<typeof HoverCardRadix.Content>) {
return (
<HoverCardRadix.Portal data-slot="hover-card-portal">
<HoverCardRadix.Content
data-slot="hover-card-content"
collisionPadding={8}
className={cn(
className,
"bg-gray-1 border border-gray-a6 rounded-sm p-1 shadow-md"
)}
{...props}
>
{children}
</HoverCardRadix.Content>
</HoverCardRadix.Portal>
);
}
export { HoverCard, HoverCardTrigger, HoverCardContent };