Hover Card
A preview card revealed by hover or keyboard focus.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@moe-ui/registry/components/ui/avatar";
import { Button } from "@moe-ui/registry/components/ui/button";
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@moe-ui/registry/components/ui/hover-card";
import { Text } from "@moe-ui/registry/components/ui/text";
import { CalendarDays } from "lucide-react-native";
import { View } from "react-native";
export default function HoverCardPreview() {
return (
<HoverCard>
<HoverCardTrigger asChild>
<Button variant="link">
<Text>@nextjs</Text>
</Button>
</HoverCardTrigger>
<HoverCardContent className="w-80">
<View className="flex flex-row justify-between space-x-4">
<Avatar alt="Vercel profile">
<AvatarImage source={{ uri: "/media/avatar.svg" }} />
<AvatarFallback>
<Text>VC</Text>
</AvatarFallback>
</Avatar>
<View className="space-y-1">
<Text className="text-sm font-semibold">@nextjs</Text>
<Text className="text-sm">
The React Framework – created and maintained by @vercel.
</Text>
<View className="flex flex-row items-center pt-2">
<CalendarDays className="mr-2 h-4 w-4 opacity-70" color="gray" />
<Text className="text-xs text-muted-foreground">
Joined December 2021
</Text>
</View>
</View>
</View>
</HoverCardContent>
</HoverCard>
);
}
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add hover-cardUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { HoverCard } from "@/components/ui/hover-card";Variants and composition
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
The trigger is keyboard reachable, Escape dismisses the surface, and focus returns to the trigger. Modal surfaces keep focus within the active layer.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports3 exports
HoverCardHoverCardContentHoverCardTrigger"use client";
import * as HoverCardPrimitive from "@rn-primitives/hover-card";
import * as React from "react";
import { Platform, StyleSheet, View } from "react-native";
import { cn } from "../../lib/utils";
const HoverCard = HoverCardPrimitive.Root;
const HoverCardTrigger = HoverCardPrimitive.Trigger;
const HoverCardContent = React.forwardRef<
React.ElementRef<typeof HoverCardPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
return (
<HoverCardPrimitive.Portal>
<View>
<HoverCardPrimitive.Overlay
style={Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined}
/>
<HoverCardPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none web:data-[state=open]:animate-in web:data-[state=closed]:animate-out web:data-[state=closed]:fade-out-0 web:data-[state=open]:fade-in-0 web:data-[state=closed]:zoom-out-95 web:data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}
>
{props.children}
</HoverCardPrimitive.Content>
</View>
</HoverCardPrimitive.Portal>
);
});
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
export { HoverCard, HoverCardContent, HoverCardTrigger };