All components
Hover Card
Rich preview panels revealed from a trigger, in four padding sizes.
Sizes
Install
zsh — hover-card
1bunx stylexblocks add hover-cardUsage — Ark UI
hover-card.tsx
12345678910111213141516171819import { HoverCard } from "#components/ui/ark-ui/hover-card.tsx";
export function Example() { return ( // size resolves once on Root; the positioner portals to <body> and the // machine handles hover intent with open/close delays. <HoverCard.Root size="md" openDelay={200} closeDelay={300}> <HoverCard.Trigger asChild> <a href="https://x.com/stylexblocks">@stylexblocks</a> </HoverCard.Trigger> <HoverCard.Positioner> <HoverCard.Content> <strong>StyleX Blocks</strong> <p>Production-ready blocks and themes, compiled with StyleX.</p> </HoverCard.Content> </HoverCard.Positioner> </HoverCard.Root> );}