127 Components
Magnetic Popover Menu
OverlaysFloating command popover menu with origin-scaled spring entry, a shared-layout magnetic row highlight, and keyboard arrow navigation.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/magnetic-popover-menu.json"
Props
TypeScript props supported by <MagneticPopoverMenu />.
| Prop | Type | Default | Description |
|---|---|---|---|
| triggerLabel | string | "Quick Actions" | Text label displayed inside the popover trigger button. |
| items | PopoverCommandItem[] | — | Array of command items with id, label, shortcut, and icon. |
| stiffness | number | 380 | Spring stiffness coefficient for popover entry and highlight glide. |
| damping | number | 26 | Spring damping coefficient controlling popover settle. |
| onSelect | (item: MenuItem) => void | — | Callback fired when an action item is selected |
Key Features
- Origin-top-left Hooke's Law spring scale and elevation entry animation.
- Shared layoutId highlight pill that glides smoothly between menu items on pointer hover or keyboard focus.
- Automatic outside-click and Escape key dismissal.
Keyboard & Accessibility
- Implements role='menu' and role='menuitem' with aria-haspopup='menu' and aria-expanded on the trigger.
- Supports ArrowUp and ArrowDown keyboard navigation across menu items.
- Disables scale and highlight glide animations when prefers-reduced-motion is active.