Floating Action Menu
Expandable speed-dial action menu with smooth 45-degree rotation and staggered spring action pop-out.
ReactTailwind CSSFramer Motion
Dependenciesframer-motion, lucide-react
npm install framer-motion lucide-reactPreview
Click plus to expand actions
Source Code
floating-action-menu.tsxtsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Plus, Share2, Bookmark, Copy, Edit3 } from "lucide-react";
export function FloatingActionMenu() {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="relative flex flex-col items-center">
<motion.button
onClick={() => setIsOpen(!isOpen)}
className="w-12 h-12 rounded-full bg-zinc-900 text-white shadow-xl flex items-center justify-center cursor-pointer"
>
<motion.div animate={{ rotate: isOpen ? 45 : 0 }}>
<Plus className="w-5 h-5" />
</motion.div>
</motion.button>
</div>
);
}Usage
usage.tsxtsx
1
<FloatingActionMenu />Types
types.tstsx
1
2
3
4
5
6
export interface ActionItem {
id: string;
label: string;
icon: React.ComponentType<{ className?: string }>;
onClick?: () => void;
}