Speed Dial
Floating action menu that expands with labeled action buttons
"use client";
import {
SpeedDial,
SpeedDialAction,
SpeedDialContent,
SpeedDialItem,
SpeedDialLabel,
SpeedDialTrigger,
} from "@/components/vritti/speed-dial";
export function SpeedDialExample() {
return (
<div className="relative flex h-64 w-full items-end justify-end p-8">
<SpeedDial>
<SpeedDialContent>
<SpeedDialItem>
<SpeedDialLabel>Copy</SpeedDialLabel>
<SpeedDialAction aria-label="Copy">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
</SpeedDialAction>
</SpeedDialItem>
<SpeedDialItem>
<SpeedDialLabel>Share</SpeedDialLabel>
<SpeedDialAction aria-label="Share">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
</SpeedDialAction>
</SpeedDialItem>
<SpeedDialItem>
<SpeedDialLabel>Edit</SpeedDialLabel>
<SpeedDialAction aria-label="Edit">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
</SpeedDialAction>
</SpeedDialItem>
</SpeedDialContent>
<SpeedDialTrigger aria-label="Open actions">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
</SpeedDialTrigger>
</SpeedDial>
</div>
);
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/speed-dial"
Dependencies
pnpm add class-variance-authority