184 Components
Hold To Engage FAB
ButtonsFloating action trigger with 45° spring rotational morphing and staggered satellite action pill expansion.
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/hold-to-engage-fab.json"
Props
TypeScript props supported by <HoldToEngageFAB />.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ComponentType | — | Custom trigger icon component. |
| actions | FABAction[] | — | Array of satellite action pill definitions. |
Key Features
- Spring-damped 45° rotation on primary plus icon transitioning into an exit cross.
- Staggered satellite action pills orbiting into place with spring trajectories.
- Action confirmation checkmark transition before menu dismissal.
- Completely customizable icon payloads and callbacks.
Keyboard & Accessibility
- Semantically bound with aria-expanded status.
- Focusable action pills navigable via keyboard.
- Reduced-motion friendly delays and scales.