Components
Hover Card
Rich preview card anchored to a trigger—Radix hover on web, tap toggle on native for parity with the showcase.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add hover-card to your project.
watermelon add hover-card2
Import the component
Import Hover Card from your local UI registry output.
Import
import { HoverCard } from "@/components/ui/hover-card";Import
Import
import {
HoverCard,
HoverCardContent,
HoverCardDescription,
HoverCardHeader,
HoverCardTitle,
HoverCardTrigger,
} from "@/components/ui/hover-card";Usage
On native, tap the trigger to open and tap again to close. On the platform preview, pointer hover uses Radix Hover Card.
Basic
Loading...
API Reference
HoverCardContent supports align and sideOffset on web (Radix). Native
content is absolutely positioned under the trigger, similar to Popover.