hyzrui
GitHub
HomeDocsHover Card

Overlays

Hover Card

Shows lightweight contextual detail without interrupting the current workflow.
Preview author
HU
HyzrUI team

Maintains the source and docs.

Live example
import { Avatar, HoverCard } from "@hyzrui/core";
 
export function Example() {
  return <HoverCard trigger="Preview author"><Avatar fallback="HU" /> HyzrUI team</HoverCard>;
}

Installation

Install the primitive source, then keep editing it inside your app. The command names the component file you want copied.

Command
pnpm dlx hyzrui add hover-card

Usage

Import the component from the generated source folder and compose it with normal React props.

Import
import { HoverCard } from "@hyzrui/core";
Usage
<HoverCard className="my-hover-card" />

Customization

Every primitive accepts local props and class names, then inherits design tokens from HyzrThemeProvider . Copy the file, keep the markup, and tune the CSS until it matches your product.

Preview author
HU
HyzrUI team

Maintains the source and docs.

Radius--hui-radiusControls the default corner system for buttons, inputs, cards, overlays, and nested surfaces.
Foreground--hui-foregroundControls the page and component text colors. Dark mode uses the same component source with different tokens.
Surface--hui-surfaceControls card, dialog, popover, and input surfaces.
Border--hui-borderControls separators, input strokes, card outlines, and menu edges.
Primary--hui-primaryControls the main action color and the matching foreground color for solid controls.
Font--hui-font-familyControls the font stack used by every primitive inside the provider.
Control size--hui-control-font-sizeControls the default font size for buttons, inputs, selects, tabs, command rows, and menu triggers.
Control weight--hui-font-weight-controlControls the default weight of buttons, tabs, menus, badges, and compact actions.
Control height--hui-control-heightControls the default field and trigger height across forms and navigation.
Button height--hui-button-heightControls button height independently from form fields.
Button padding--hui-button-paddingControls horizontal button spacing without changing the text size.
Card padding--hui-card-paddingControls card, dialog, sheet, drawer, and panel interior spacing.
Border width--hui-border-widthControls default edge width for controls, cards, tables, and floating panels.
Focus width--hui-focus-widthControls keyboard focus outline thickness.
Motion duration--hui-transition-durationControls shared hover timing for controls and surfaces.
Hover lift--hui-hover-liftControls subtle hover lift for raised styles.
Overlay--hui-overlayControls dialog, sheet, drawer, and command overlay strength.
Floating offset--hui-floating-offsetControls menu, command, popover, and hover-card distance from the trigger.
Source fileEdit src/lib/hyzrui/components/hover-card.tsx directly once the primitive is installed in your app.
Local classTarget .hui-hover-card for local refinements that should not become global theme tokens.
Theme tokens
import { defineHyzrTheme } from "@hyzrui/core";
 
export const theme = defineHyzrTheme({
  id: "product",
  density: "comfortable",
  radius: 10,
  shadow: 0.08,
  colors: {
    background: "#fbfbfc",
    foreground: "#09090b",
    surface: "#ffffff",
    border: "#e4e4e7",
    primary: "#18181b",
    primaryForeground: "#ffffff",
  },
  typography: {
    controlSize: 14,
    controlWeight: 500,
    headingWeight: 680,
  },
  sizing: {
    controlHeight: 38,
    buttonHeight: 34,
    buttonPadding: 14,
    cardPadding: 18,
  },
  borders: {
    radius: 10,
    radiusSm: 7,
    radiusLg: 16,
    width: 1,
    focusWidth: 2,
  },
  motion: {
    duration: 150,
    hoverLift: 0,
    hoverMix: 5,
  },
});

See the customization guide for the full theme shape, style presets, scoped CSS overrides, and source-edit workflow.

Examples

These examples show the same primitive in realistic combinations and states.

Profile preview

Reveal a profile or preview card on hover without a click or navigation.

@hyzrui
HU
HyzrUI

Open-source React component primitives. 60+ components.

Profile preview
import { Avatar, HoverCard } from "@hyzrui/core";
 
export function HoverCardProfile() {
  return (
    <HoverCard trigger="@hyzrui">
      <div style={{ display: "flex", gap: 12 }}>
        <Avatar fallback="HU" />
        <div>
          <strong style={{ fontSize: "0.875rem" }}>HyzrUI</strong>
          <p style={{ fontSize: "0.8125rem", color: "var(--hui-muted)", margin: "2px 0 0" }}>Open-source React component primitives. 60+ components.</p>
        </div>
      </div>
    </HoverCard>
  );
}

API Reference

Props are intentionally small. For deeper changes, edit the component source file directly.

PropTypeDefaultDescription
classNamestring-Adds classes to the copied component without replacing the default structure.
childrenReact.ReactNode-The rendered content for compound or wrapper components.
...propsHTMLAttributes-Forwards native element props such as id, aria attributes, and event handlers.
triggerReact.ReactNode-Inline trigger text or element.
childrenReact.ReactNode-Hover content.