127 Components
Radial Menu Orb
NavigationFloating command orb that blossoms into a 360-degree polar-coordinate action ring with staggered Hooke's Law spring trajectories.
Action: Ready
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/radial-menu-orb.json"
Props
TypeScript props supported by <RadialMenuOrb />.
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | RadialOrbAction[] | — | Array of satellite action items containing id, label, icon node, and optional click callback. |
| radius | number | 78 | Polar orbit radius in pixels from center orb to satellite buttons. |
| stiffness | number | 340 | Spring stiffness coefficient for radial expansion and collapse. |
| damping | number | 22 | Spring damping coefficient controlling orbital settling. |
| onSelect | (actionId: string) => void | — | Callback fired when an action radial slice is selected |
Key Features
- Trigonometric polar coordinate distribution (cos/sin) that adapts automatically to any number of satellite actions.
- Staggered Hooke's Law spring blossom and collapse trajectories with rotational core icon feedback.
- Accessible keyboard navigation and Escape key dismissal.
Keyboard & Accessibility
- Core orb button announces open/closed state via aria-expanded and descriptive aria-label.
- Each satellite action button includes an explicit aria-label and focus-visible tooltip.
- Supports Escape key dismissal and disables spring travel when prefers-reduced-motion is active.