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 — Base UI
hover-card.tsx
1234567891011121314151617181920import { HoverCard } from "#components/ui/base-ui/hover-card.tsx";
// Base UI's PreviewCard machine wearing the hover-card recipe.export function Example() { return ( <HoverCard.Root size="md"> <HoverCard.Trigger href="https://x.com/stylexblocks"> @stylexblocks </HoverCard.Trigger> <HoverCard.Portal> <HoverCard.Positioner sideOffset={8}> <HoverCard.Popup> <strong>StyleX Blocks</strong> <p>Production-ready blocks and themes, compiled with StyleX.</p> </HoverCard.Popup> </HoverCard.Positioner> </HoverCard.Portal> </HoverCard.Root> );}