hyzrui
GitHub
HomeDocsContext Menu

Overlays

Context Menu

A custom right-click menu with consistent dark and light mode styling.
Live example
import { ContextMenu } from "@hyzrui/core";
 
export function Example() {
  return (
    <ContextMenu actions={[{ label: "Copy" }, { label: "Rename" }]}>
      <button type="button">Right-click target</button>
    </ContextMenu>
  );
}

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 context-menu

Usage

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

Import
import { ContextMenu } from "@hyzrui/core";
Usage
<ContextMenu className="my-context-menu" />

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.

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/context-menu.tsx directly once the primitive is installed in your app.
Local classTarget .hui-context-menu 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.

File context menu

A right-click menu for file and item actions, with shortcuts and a destructive option.

File context menu
import { ContextMenu } from "@hyzrui/core";
 
export function ContextMenuFile() {
  return (
    <ContextMenu
      actions={[
        { label: "Open", shortcut: "Enter" },
        { label: "Rename", shortcut: "F2" },
        { label: "Copy", shortcut: "Cmd C" },
        { danger: true, label: "Delete", shortcut: "Del" },
      ]}
    >
      <div style={{ border: "1px dashed var(--hui-border)", borderRadius: "var(--hui-radius)", padding: "24px", textAlign: "center", fontSize: "0.875rem", color: "var(--hui-muted)" }}>
        Right-click this file
      </div>
    </ContextMenu>
  );
}

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.
actionsContextMenuAction[]-Actions shown when the user right-clicks the target.
childrenReact.ReactNode-The right-click target.