Components
Installation
pnpm dlx shadcn@latest add https://basecn.dev/r/hover-card.jsonor
If you are using a namespaced registry, you can use the following command:
pnpm dlx shadcn@latest add @basecn/hover-cardMigrating 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 HoverCardTrigger component to achieve the same functionality.
import { HoverCard } from "@/components/ui/hover-card"
<HoverCard>
<HoverCardTrigger delay={100}>...</HoverCardTrigger>
<HoverCardContent>...</HoverCardContent>
</HoverCard>