HoverCard - EnterUI

OverlaysUpdated May 3, 2026

#Default usage

#Usage

import {
  Button,
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild><Button variant="secondary">EnterUI</Button></HoverCardTrigger>
      <HoverCardContent>
        <div className="docs-preview-stack">
          <strong>EnterUI</strong>
          <span className="docs-preview-muted">Product components built on FroggDesign tokens.</span>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

#Accessibility

HoverCard uses Radix behavior for pointer and focus interactions. Do not place critical instructions only inside hover content.

#API

HoverCardContent supports side, alignment, offset, and className.
HoverCardTrigger supports asChild.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page