Popper — Design System

Props

The full prop API for Popper. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.

Prop	Type	Default	Description	Since
`open`	`boolean`	—	Controlled open state.	0.9.0
`defaultOpen`	`boolean`	`false`	Initial uncontrolled open state.	0.9.0
`onOpenChange`	`(open: boolean) => void`	—	Called when outside pointer, Escape, or trigger interaction requests a state change.	0.9.0
`placement`	`Placement`	`'bottom-start'`	Popper v2 placement: auto, top, right, bottom, left, and start/end variants.	0.9.0
`strategy`	`'absolute' \| 'fixed'`	`'absolute'`	Positioning strategy used by Popper.	0.9.0
`offset`	`[number, number]`	`[0, 8]`	Skid and distance offset passed to the Popper offset modifier.	0.9.0
`flip`	`boolean`	`true`	Enables Popper flip behavior when the preferred side overflows.	0.9.0
`preventOverflow`	`boolean`	`true`	Keeps the panel inside visible clipping boundaries.	0.9.0
`arrow`	`boolean`	`false`	Adds and wires PopperArrow to the arrow modifier.	0.9.0
`matchReferenceWidth`	`boolean`	`false`	Sets the popper width to match the trigger/reference width.	0.9.0
`modifiers`	`ReadonlyArray<PopperModifier>`	—	Custom Popper modifiers appended after built-in modifiers.	0.9.0
`referenceElement`	`Element \| VirtualElement \| null`	—	External or virtual reference. Use for context menus, canvas anchors, and cursor-based panels.	0.9.0
`portalled`	`boolean`	`true`	Renders PopperContent into document.body.	0.9.0
`hideWhenReferenceHidden`	`boolean`	`true`	Hides content when the reference is clipped or out of view. On PopperContent.	0.9.0
`size`	`'sm' \| 'md' \| 'lg' \| 'auto'`	`'md'`	Content width preset. On PopperContent.	0.9.0

import { Popper, PopperTrigger, PopperContent } from '@mihcm/ui/Popper';