Floating Action Button
A development-only expandable FAB that exposes quick AI content actions with Framer Motion animations.
FloatingActionButton renders a circular toggle button that expands into a vertical stack of labelled action pills. It is intentionally gated to NODE_ENV === "development" and returns null in production, making it safe to leave mounted in page layouts without shipping the UI to end users.
The main button rotates from a + to an × icon as the panel opens, and each action pill animates in with a staggered entrance. A backdrop overlay closes the panel when clicked outside.
Note — Because the component only renders in development, the live preview below is an equivalent replica to illustrate the interaction.
Installation
npx shadcn@latest add @adv/floating-action-buttonUsage
import FloatingActionButton from '@/components/floating-action-button';
<div className="fixed bottom-6 right-6 z-50">
<FloatingActionButton onAction={(action) => console.log(action)} />
</div>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onAction | (action: string) => void | — | Required. Called with the action id ("shorter", "summary", "share") when an item is activated. |
className | string | "" | Additional classes applied to the outer container. |