Components
Hover Card
For sighted users to preview content available behind a link.
Installation
pnpm dlx shadcn@latest add https://basecn.dev/r/hover-card.jsonMigrating from Radix UI
Common Migration Steps
All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns.
Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.
Open Delay Configuration
In Radix UI, you can pass the openDelay prop to the HoverCard component to control the delay before the hover card opens.
import { HoverCard } from "@/components/ui/hover-card"
<HoverCard openDelay={100}>
<HoverCardTrigger>...</HoverCardTrigger>
<HoverCardContent>...</HoverCardContent>
</HoverCard>With Base UI, you can pass the delay prop to the HoverCard component to achieve the same functionality.
import { HoverCard } from "@/components/ui/hover-card"
<HoverCard delay={100}>
<HoverCardTrigger>...</HoverCardTrigger>
<HoverCardContent>...</HoverCardContent>
</HoverCard>