HoverCard

Rich preview card that appears on hover over a trigger element, with delay support.

Examples

Hover over a link to reveal a detail card.

User profile card revealed on hover.

Structured data table inside a hover card.

Hover card appearing from different sides.

Content appears above

Content appears right

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { HoverCard } from "@rokle/components";

import { HoverCard } from "@rokle/components";

export function Example() {
  return <HoverCard />;
}

Prop	Type	Default	Description
trigger	ReactNode	-	Element that triggers the card on hover.
children	ReactNode	-	Card content.
openDelay	number	200	Delay in ms before opening.