ns-ui
A popover that hangs from its trigger like a plumb bob: it drops in off-vertical, sways once or twice on a damped pendulum, and settles plumb — connected by a hairline SVG string that doubles as the anchor indicator.
Use when an anchored non-modal panel whose entrance should make the anchor relationship visible, dropping off-vertical on a hairline string and settling plumb; pick hover-card-dwell instead when the failure being solved is opening on unintended hover and the delay itself should be a visible gate, tooltip-delay-group when the content is a short label rather than a panel, or dialog-emerge when it has to be modal.
Install
npx shadcn add https://design.helpmarq.comns-ui / popover-pendulum
A popover connected to its trigger by a hairline string. It drops in slightly off-vertical, sways twice on a damped pendulum, then settles perfectly plumb.
Issue triage
The Filters button opens a non-modal popover — focus moves in, Escape or an outside click dismisses it. @rosacortez opens a hovercard on hover or keyboard focus, without stealing focus from the trigger — try Tab.
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | — | rendered inside the trigger button |
| triggerLabel? | string | — | accessible name for the trigger, when `trigger` isn't already readable text |
| children | ReactNode | — | popover body — interactive content is fine, it's reachable by Tab from frame one |
| label? | string | — | accessible name for the panel. Required in "click" mode (role="dialog"); unused in "hover" mode. |
| interaction? | "click" | "hover" | — | "click" (default): focus moves into the panel, role="dialog". "hover": the profile-hovercard variant — opens on hover/focus, focus stays on the trigger. |
| placement? | "bottom" | "top" | — | preferred side; flips automatically when the panel would clip the viewport |
| panelWidth? | number | — | — |
| className? | string | — | — |
| panelClassName? | string | — | — |